jQuery div drop down on a click event

Question

I was looking to achieve the same effect as on the website http://www.wpnukes.com/demo/html/welcare/

Please notice the contact link on the top right of the screen next to sign in link, when you click on Contact a div drop down with jerks, How can I achieve this effect or some one please tell me the name of this effect so i can google it and can find a code. please, Thanks.

Answer 1

You must use jQuery UI for this type of effects. All they have done is a div with absolute position to contact button and display:none; The query on contact button triggers the effect. Remember you should add the jquery Core plus UI file to your html.

SOLUTION 1 - BOUNCE EFFECT - LIVE DEMO

$(document).ready(function(){
    $("button" ).click(function() {
         $( ".toggle" ).toggle( "bounce", { times: 3 }, "slow" );
    });
});

SOLUTION 2 - EASEOUTBOUNCE EFFECT - LIVE DEMO

$(document).ready(function(){
   $("button").click(function () {
      $('.login').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });
});