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
}

Answer 2

他们只是显示/隐藏div并将其绝对放在页面顶部。看看标识为infobox的div，您将看到执行此操作所需的所有css。 infobox内部是已经存在的不同国家/地区的所有文本，每个国家/地区都包含一个属性为display:none的div。根据您点击的国家/地区，他们会将显示属性更改为相应div上的block和其他所有内容的display:none。

如何使用jQuery实现这个很酷的弹出div效果？

2 个答案: