Jquery Menu with Bounce effect

 Hi *.*,

Last day my friend shared me an interesting Jquery tip on that basic v created an menu with Bounce effect on hover.

Demo

 

 Code 

Its done by using Easing jQuery plugin and its easeOutBounce value.Here font size is changed using Jquery on hover effect.

$(function() {

    $('li', '#navigation').each(function() {

        var $li = $(this);

        var $a = $('a', $li);

        $a.hover(function() {

            $a.stop(true, true).animate({

                height: '3em',

                lineHeight: '3em',

                bottom: '1em'

            }, 'slow', 'easeOutBounce');

        }, function() {

            $a.stop(true, true).animate({

                height: '2em',

                lineHeight: '2em',

                bottom: 0

            }, 'slow', 'easeOutBounce');

        });

    });

});

Download sample from here

Stay Tune...

Have a nice day... 'N happy Coding :)