如何使用jQuery實現這個很酷的彈出div效果？

當你點擊頁面上的圖標http://www.mansory.com/en/dealers你會發現一個div彈出顯示一些信息。我只是無法弄清楚他們如何使用css/jQuery的東西來實現效果。效果的機制是什麼？如何使用jQuery實現這個很酷的彈出div效果？

來源

2013-01-07 josh kugler

他們使用的機制，他們默認使彈出ul'顯示：無'，當你點擊任何鏈接使用jquery它添加任何類說'懸停'，併爲該類添加CSS是'li.hovering li.innermost ' –

[Fire a reveal modal]（http://www.zurb.com/playground/reveal-modal-plugin）。 –

首先在瀏覽器控制檯中查看元素css，當它顯示時以及隱藏時......會爲您提供很多線索。經常可以看到實況動畫css的變化......至少在Firebug中你可以 – charlietfl

這種機制被稱爲動畫。他們只是顯示/隱藏div，並不斷改變彈出窗口的位置。

多見於

我做一個簡單的演示here

HTML：

<div class='container'> 
    <button id="btnShow">Show</button> 
    <div class='menu' style='display: none'> 
     <button id="btnHide">Close</button><br/> 
     Ernst-Heinkel-Strasse 7,<br/> 
     DE-71394 Kernen i.R. Germany<br/> 
     Contact <br/> 
     Telefon: 07151/994 64 -0<br/> 
     Fax: 07151/994 64 -22<br/> 
     www.herceg.com <br/> 
     email: [email protected] <br/> 
    </div> 
</div>

JS：

$(document).ready(function(){ 
    $('#btnShow').click(function(){ 
     $('.menu').show().css("top", "400px").animate({top: 50}, 200); 
    }); 

    $('#btnHide').click(function(){ 
     $('.menu').hide(); 
    }); 
});

CSS：

.container { 
    with: 400px; 
    height: 300px; 
    border: 1px solid black; 
} 

.menu { 
    position: absolute; 
    border: 1px solid black; 
    background: #fff; 
    left: 180px 
}

來源

2013-01-07 02:58:08 phnkha

{top：50}在這裏表示什麼？您將頂部屬性設置爲400px，那麼{top：50}是什麼？ –

啊，這意味着Top會在200毫秒內從400變爲50 – phnkha

他們只是顯示/隱藏一個div並將其絕對置於頁面頂部。看看編號爲infobox的div，您將看到所有需要執行此操作的CSS。 infobox裏面已經有不同國家的文字了，每個文字都有一個div，屬性display:none。根據您點擊的國家/地區，他們會將相應的div上的顯示屬性更改爲block，其餘的則將其更改爲display:none。

來源

2013-01-07 02:48:30

如何使用jQuery實現這個很酷的彈出div效果？

回答

相關問題