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'
      });
   });
});

Answer 2

Take a look at jQueryUI, there is some animate bounce effects

Answer 3

Thats a custom jquery animation:

$("#link").click(function(e) {          
        e.preventDefault();
        $('#divToAnimate').animate({height: 'show', opacity: '0', filter: 'alpha(opacity=0)'}, {duration: 0}).animate({opacity: '.5', filter: 'alpha(opacity=50)', top: 58}, {duration: 300, easing: 'easeInBack'}).animate({opacity: '1', filter: 'alpha(opacity=100)', top: 24}, {duration: 200, easing: 'easeOutBack'});
    });