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.
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:
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
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:
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.