javascript - 如何使用 jQuery 实现这个很酷的 popup div 效果？

Question

当你点击页面上的图标时http://www.mansory.com/en/dealers你会发现一个 div 弹出显示一些信息。我只是想不通他们是如何使用 css/jQuery 来实现效果的。作用机制是什么？

Answer 1

这种机制称为动画。它们只是简单地显示/隐藏 div 并不断更改弹出窗口的位置。

查看更多信息 http://api.jquery.com/animate/

我做了一个简单的演示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: 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
}