如何使用jQuery實現這個很棒的pop div效果？

Question

當您單擊http://www.mansory.com/zh-cn/dealers頁面上的圖標時，您會發現彈出div並顯示一些信息。 我只是無法弄清楚他們是如何使用css / jQuery來實現效果的。 影響的機理是什么？

Answer 1

這種機制稱為動畫。 它們只是顯示/隱藏div並不斷更改彈出窗口的位置。

詳情請參閱http://api.jquery.com/animate/

我在這里做一個簡單的演示

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: info@herceg.com <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
}

Answer 2

他們只是顯示/隱藏div並將其絕對定位在頁面頂部。 看一下帶有id infobox的div，您將看到執行此操作所需的所有css。 infobox已經是不同國家/地區的所有文本，每個文本都被一個div包圍，其屬性為display:none 。 根據您所單擊的國家/地區，它們將更改顯示屬性以在相應的div上block ，並在所有其余部分上display:none 。