jQuery Menu Effect Plugin

There are 6 effects contain in this small plugin that i created casually for the purpose for making the overall menu bar more interesting. The plugin itself is quite easy to use but it may contain many unnecessary code since you will only be using a single effect of the plugin, others will be just there to sum up the size of the file. Therefore, if you would like to only use one of the effect in this small plugin, just remove the other effect located in the plugin. Feel free to see how each effect work, you can also search this site for the how-to tutorial on each of the effect in jQuery.

Information

• Current version: 1.0
• Licensing: MIT

Browser Tested

• Firefox 3.0.7
• IE 7.0.5730.13
• Opera 9.64
• Google Chrome
• Safari

Dependencies

• jQuery 1.31

Documentation

I will keep the documentation simple, each method will have certain parameter that can be adjust such as speed of the effect and etc. by default, all these effect already have their own default values. Therefore, without any changes you can also call it out by stating its method.

There are 6 effects altogether.

1. OthersFade()
2. OthersJump()
3. OthersBlink()
4. OthersRollUp()
5. OthersRollDown()
6. OthersVibrate()

Each effect can be viewed on the demo page.  In order to call each effect, you will just have to do the following,

$("div#menu1 ul#main li").OthersFade();
$("div#menu2 ul#main li").OthersJump();
$("div#menu3 ul#main li").OthersBlink();
$("div#menu4 ul#main li").OthersRollUp();
$("div#menu5 ul#main li").OthersRollDown();
$("div#menu6 ul#main li").OthersVibrate();

bear in mind that the selection on jquery must be pointing at the element ‘

‘ and the parameter of each effect is stated below,

OthersFade()

• startOpacity: 1, //the start visibility
• hoverOpacity: 0, //the hover visbility
• duration: 2000  //the effect duration to reach hover opacity

OthersJump()

• jumpHeight: 15, //how height it jump
• jumpDirection: 0, //’0′ jump upwards, ‘1′ jump downwards
• duration: 100  //duration of the effect

OthersBlink()

• brightness: 0.5 //the quickness of the effect
• duration: 100 //duration of effect

OthersRollUp()

• duration: 1000 //speed of effect

OthersRollDown()

• duration: 1000 //speed of effect

OthersVibrate()

• interval: 30,  // the start interval of each vibration
• duration: 1000, // the duration of the vibration
• shake: 3 //the area that the vibration will be moving

Support

• Please post bug reports and other contributions (enhancements, features, etc.) to clay@hungred.com and i will try to get back to you asap. You can comment below to seek help too.
• Any additional effect you would like to have in this plugin, please comment below or email me so that i can add them up.
• There are a lot of how-to effect in this particular site, feel free to search for it and learn up yourself to get this effect on your own plugin

Donation

Update

• initial released

File

• Download (All the files including the demo files)
• Demo

Example of usage

• Cocoonsg.com

interval: 30,
duration: 1000,
shake: 3

 

Like this post? Share it!

Related posts:

1. Tutorial: How to create a simple vibration effect for your form box with jQuery This is a simple tutorial to show case how a...
2. Tutorial: How to Create your own jQuery Flip effect plugin A jQuery tutorial to demonstrate how jQuery flip effect work...
3. jQuery Plugin: RAWR! Image Effect Gallery (RIEG) The first release of jQuery Plugin - RAWR Image Effect...
4. Tutorial: How to create your own continuously slide effect plugin with jQuery In this tutorial, i will explain the concept and code...
5. Tutorial: jQuery effect – how to shrink/zoom at the center of a container A tutorial to demonstrate and explain how can element be...

Author: Clay Lua

Clay is the main writer and founder of Hungred.com. A person who thinks a lot and spend majority of his time online. He spend most of his time developing web application and writing articles to share and learn. You can find him at his twitter.

This entry was posted on Monday, June 29th at 6:23 PM and is filed under Informative, Wordpress Plugin. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.