When you click the icon on the page http://www.mansory.com/en/dealers you 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?
This mechanism is called animation. They simply show/hide the div and continuously change the position of the popup.
See more at http://api.jquery.com/animate/
I make a simple demo 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
}
