javascript 如何使用 jQuery 实现这个很酷的弹出 div 效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14189104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement this cool popup div effect using jQuery?
提问by josh kugler
When you click the icon on the page http://www.mansory.com/en/dealersyou will find a div pops up displaying some information. I just cannot figure it out how they did the effect using css/jQuery things. What is the mechanism of the effect?
当您单击页面http://www.mansory.com/en/dealers上的图标时，您会发现弹出一个 div 显示一些信息。我只是无法弄清楚他们是如何使用 css/jQuery 的东西来实现效果的。作用机制是什么？
回答by phnkha
This mechanism is called animation. They simply show/hide the div and continuously change the position of the popup.
这种机制称为动画。它们只是显示/隐藏 div 并不断更改弹出窗口的位置。
See more at http://api.jquery.com/animate/
在http://api.jquery.com/animate/查看更多
I make a simple demo here
我在这里做了一个简单的演示
HTML:
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:
JS：
$(document).ready(function(){
$('#btnShow').click(function(){
$('.menu').show().css("top", "400px").animate({top: 50}, 200);
});
$('#btnHide').click(function(){
$('.menu').hide();
});
});
CSS:
CSS：
.container {
with: 400px;
height: 300px;
border: 1px solid black;
}
.menu {
position: absolute;
border: 1px solid black;
background: #fff;
left: 180px
}
回答by Chris Montgomery
They simply show/hide a div and position it absolutely over top the page. Take a look at the div with the id infoboxand you'll see all the css needed to do this. Inside of infoboxis all the text for the different countries already, each one surrounded by a div with the property display:none. Depending on what country you click on they will change the display property to blockon the corresponding div and display:noneon all the rest.
他们只是显示/隐藏一个 div 并将其绝对放置在页面顶部。查看带有 id 的 div，infobox您将看到执行此操作所需的所有 css。里面infobox已经是不同国家的所有文本，每个文本都被一个带有属性的 div 包围display:none。根据您单击的国家/地区，它们会将显示属性更改block为相应的 div 和display:none所有其余部分。
