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

    [donate]

    Update

    • initial released

    File

    Example of usage

    interval: 30,
    duration: 1000,
    shake: 3
     

    Like this post? Share it!

    digg 48 jQuery Menu Effect Plugin reddit 48 jQuery Menu Effect Plugin stumbleupon 48 jQuery Menu Effect Plugin delicious 48 jQuery Menu Effect Plugin furl 48 jQuery Menu Effect Plugin technorati 48 jQuery Menu Effect Plugin google 48 jQuery Menu Effect Plugin myspace 48 jQuery Menu Effect Plugin facebook 48 jQuery Menu Effect Plugin twitter 48 jQuery Menu Effect Plugin
    share save 171 16 jQuery Menu Effect Plugin

    No related posts.

About Clay

I am Clay who is the main writer for this website. I own a small web hosting company in Malaysia and i'm available to be hired as individual contractor on elance or odesk. You can find me on twitter.
This entry was posted in Informative, Wordpress Plugin and tagged , . Bookmark the permalink.

5 Responses to jQuery Menu Effect Plugin

  1. Josh says:

    Nice Fancy plugin Clay, thanks

  2. Clay says:

    no problem Josh, if there is anything you would like me to add into
    this simple plugin let me know!

  3. Pingback: Plugin de jQuery ==Menu Effect== | Haz tu web

  4. Pingback: 11 menu and navigation jquery plugins you don’t want to miss « TutsValley

  5. Pingback: Geniar Software Blog » Blog Archive » Coolest Menu and Navigation Jquery Plugins