Animated Menu Using jQuery Animate Function

You would have seen many websites having attractive menu bars, when you mouse hover menu items then they display details. It looks really good as well as user friendly as user will get to know more as he enters that menu area. Most of these menu bars are animated and designed using flash. But using flash in websites has some disadvantages like it requires flash plugin to be installed in browser etc.

animated menu jquery infotuts

LIVE DEMO DOWNLOAD

In this tutorial we will achieve something similar using jQuery animation.  Lets learn about jQuery custom animation:

The syntax of Jquery’s animate function is:

$(selector).animate({params},[speed],[easing],[callback])

The key parameter is params. It defines the properties that will be animated. Many properties can be defined/animated at the same time: for example

animate({width:"70%",opacity:"show",marginLeft:"0.6in",fontSize:"3em"});

The second parameter is speed. It defines the flow/speed with which animation would occur. It takes the values “fast”, “slow”, “normal”, or milliseconds.

The third parameter easing takes two values “swing” and “linear”. Swing makes animation slower at the start and it becomes faster in the middle. Linear animation makes it to move in a constant speed.

Fourth parameter is callback. It means you can call a function here which will be executed after the animation is completed.

Lets understand how to create animated menu bar using jQuery animation. Below is our jQuery code:

<html>
<head>
<title>Animated Menu Using jQuery</title>

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){

$(".menu a").append("<p></p>"); // append <p> tag to anchor of menu class.

$(".menu a").hover(function() {
$(this).find("p").animate({opacity: "show", top: "-75", fontSize:"1em"}, "slow");
// function to show animation effect on hover
var hoverDisplayText = $(this).attr("title"); // set value of title attribute in a variable
$(this).find("p").text(hoverDisplayText);
}, function() {
$(this).find("p").animate({opacity: "hide", top: "-100"}, "fast");
// function to hide animation effect after hover
});
});
</script></head><body>
<ul>
<li>
<a href="http://www.infotuts.com" title="Go to homepage">Home</a>
</li>
<li>
<a href="http://www.infotuts.com/" title="jQuery custom animation">Tutorial link</a>
</li>
<li>
<a href="http://facebook.com/infotuts" title="Like Us on Facebook">Facebook</a>

</li>
<li>
<a href="https://plus.google.com/u/0/115620576257640350420/posts" title="Join Me On Google+">Google +</a>
</li>
</ul>
</body>
</html>

Thanks to WebDesignerWall for wonderful implementation.

You can give any other custom animation using jQuery.  Play with the jQuery code and you will see how amazing it is.

Post Tagged with

5 Responses so far.

  1. May Thet says:

    Thank you for the great tutorial. I found this typo error.
    In source code css, .menu li p{ background url image must be hover1.png.

    I come to learn your tutorial by the recommendation of http://www.jqueryjam.com

  2. Sanjeev says:

    Hi May,

    Thanks for the heads up and m glad that you liked this tut :)

  3. [...] Menu Using jQuery Animate Function – MORE INFO / [...]


About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE