jQuery Button fade, slide up, down animator plugin

Update: 2.8.10 Version 1.0.2 has been released with some Bug Fix on IE. Please download a fresh copy of the plugin

So far, we have been busy modifying iTg! And while doing this, we came up with many new ideas as well as jQuery, php and other scripts!

One of this is a brand new jQuery Plugin, which we have named iTgButtonAnimator… The purpose of the plugin goes pretty well with the name! What it does is adds some good animation to link buttons… This is useful to use for say social networking button lists! But before we begin here are the quick download and demo link…

Online Demo[download id=”1″ format=”1″]

Overview:

jQuery Button animator plugin adds some animation effect to the HTML buttons. The buttons can be made via HTML link and image tags or even by CSS Sprite (recommended). There is no restriction on what the HTML markup is or can be! Just be creative and add some interactivity to your creativity with our plugin! iTgButtonAnimator is capable of 5 types of different animations:

Slide Up animation: Buttons moves a specified pixel up when hovered
Slide Down animation: Buttons moves a specified pixel down when hovered
Fade animation: Buttons fade out when hovered (upto a specified transparency)
Slide Up Fade: Adds fade animation to the slide up
Slide Down Fade: Adds fade animation to the slide down

Check in our Demo Page for all the animations…

Features:

Supports 5 different types of animations. Normal fade animation, slide up and down animation and a combination of slide up and slide down with fade.
Very light weighted! Only 4KB minified.
Fully supports jQuery easing equations. Check them out on the Demo page.
Support calling multiple widgets on the same page via same/different class or different ids!

Just check in the Demo page to know what you will get!

Installation:

Installation is pretty easy like any other plugin. What you have to do is, just download the package from above. There you will find two js files. Copy the animator.min.js file to your server and insert the js file on your site template. Also you do need to add jQuery framework before including our plugin! If you need some help on including jQuery then I suggest reading this post…

So all what you need to do is add jQuery and the plugin to the <head> section of your site template!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!-- included the jQuery framework from google -->
<script type="text/javascript" src="http://yoursite.com/path/to/js/animator.min.js"></script> <!-- included the jQuery animator Plugin -->

That’s all! now you are ready to call the plugin.

Calling the Plugin:

This is pretty… All you have to do is to call the script to the button container in jQuery style. Depending on you HTML markup it may vary a little bit! For example, say you HTML markup is as follows:

<ul id="slide_down" class="sprite">
    <li><a href="http://twitter.com/swashata" class="twitter"><span>Twitter</span></a></li>
    <li><a href="http://www.facebook.com/swashata" class="facebook"><span>Facebook</span></a></li>
    <li><a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://www.intechgrity.com" class="technorati"><span>Technorati</span></a></li>
    <li><a href="http://friendfeed.com/swashata" class="friendfeed"><span>FriendFeed</span></a></li>
    <li><a class="rss" href="http://feeds2.feedburner.com/greentechspot"><span>RSS</span></a></li>
</ul>

Now what we want is add animation to the <a> tags inside the <li> tag. So we will call the script in this manner… (Obviously inside a jQuery document ready event)

$(document).ready(function(){
    $('#slide_down').itgButtonAnimator({
        find_child : 'li a',
        animation : 'slide_down',
        slideRange : 20,
        animationInSpeed : 400,
        animationOutSpeed : 300
    });
});

Thats it! What the plugin does is

Catches the ul with id “slide_down”
Finds all li a child elements within it!
Applies the slide_down animation to the child elements

I have kept the find_child mandatory to make the plugin work better while chaining to multiple widgets of same class! So, if you have say

<div id="slide_down_fade_no1" class="nosprite multi">
    <a href="http://twitter.com/swashata" class="twitter"><img src="images/twitter.png" /></a>
    <a href="http://www.facebook.com/swashata"><img src="images/facebook.png" /></a>
    <a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://www.intechgrity.com"><img src="images/technorati.png" /></a>
    <a href="http://friendfeed.com/swashata"><img src="images/friendfeed.png" /></a>
    <a href="http://feeds2.feedburner.com/greentechspot"><img src="images/rss.png" /></a>
</div>
<div id="slide_down_fade_no2" class="nosprite multi">
    <a href="http://twitter.com/swashata" class="twitter"><img src="images/twitter.png" /></a>
    <a href="http://www.facebook.com/swashata"><img src="images/facebook.png" /></a>
    <a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://www.intechgrity.com"><img src="images/technorati.png" /></a>
    <a href="http://friendfeed.com/swashata"><img src="images/friendfeed.png" /></a>
    <a href="http://feeds2.feedburner.com/greentechspot"><img src="images/rss.png" /></a>
</div>
<div id="slide_down_fade_no3" class="nosprite multi">
    <a href="http://twitter.com/swashata" class="twitter">Be</a>
    <a href="http://www.facebook.com/swashata">A</a>
    <a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://www.intechgrity.com">Little</a>
    <a href="http://friendfeed.com/swashata">Creative!</a>
    <a href="http://feeds2.feedburner.com/greentechspot">Bingo</a>
</div>

Then all you have to do is call only a single instance of the Plugin to the class “multi”

$(document).ready(function(){
    $('.multi').itgButtonAnimator({
        find_child : 'a',
        animation : 'slide_up_fade',
        fadeOpacity : 0.3,
        slideRange : 40,
        animationInSpeed : 1000,
        animationOutSpeed : 300,
        easing : 'easeOutBounce'
    });
});

And you will see the effect applied differently on each of the widgets…

Parameters:

You should have figured a little bit about the parameters yourself by now! Here is a complete list of parameters!

*jQuery button animator options parameter*
Parameter	type	Description	Default value
find_child	string	The CSS selector type of the child element to which animation would be applied	‘a’
animation	string	The animation method. Possible values are fade slide_up slide_down slide_up_fade slide_down_fade	slide_up_fade
fadeOpacity	integer	The opacity upto which the button will be faded	0.3
slideRange	integer	The amount (in pixel) upto which the button would slide (up or down)	15
animationInSpeed	integer	The animation speed on mouseover event (In millisecond)	400
animationOutSpeed	integer	The animation speed on mouseout event (In millisecond)	200
easing	string	The easing function to use for a better animation: A complete function list can be found here	linear

Well that’s it! So what are you waiting for? Just start enjoying! Also if you have liked this Plugin then please do rate it over jQuery Plugin homepage.

One again, here are the download and Online demo link.

Online Demo[download id=”1″ format=”1″]

Bonus:

The CSS Part:

Although this is a bit out of topic, but I just thought of including this for the completion! In our online demo we have shown up two possible ways of CSS and XHTML markup. It is actually very easy. We first make a sprite image like this…

Then we put in our HTML markup!

<ul id="slide_down" class="sprite">
    <li><a href="http://twitter.com/swashata" class="twitter"><span>Twitter</span></a></li>
    <li><a href="http://www.facebook.com/swashata" class="facebook"><span>Facebook</span></a></li>
    <li><a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://www.intechgrity.com" class="technorati"><span>Technorati</span></a></li>
    <li><a href="http://friendfeed.com/swashata" class="friendfeed"><span>FriendFeed</span></a></li>
    <li><a class="rss" href="http://feeds2.feedburner.com/greentechspot"><span>RSS</span></a></li>
</ul>

Now we put the CSS code for the ul with class=”sprite”…

/* The Sprite Structure */
ul.sprite {
    list-style: none;
    list-style-type: none;
    background: none;
    overflow: hidden;
    margin: 10px 0;
    padding: 0;
}
ul.sprite li {
    display: block;
    float: left;
    width: 42px;
    margin: 0;
    padding: 0;
    background: none;
}
ul.sprite li a {
    display: block;
    height: 32px;
    width: 32px;
    padding: 0 5px;
    margin: 0;
}
ul.sprite li a span {
    display: block;
    text-indent: -9999px;
    height: 32px;
    width: 32px;
    background-image: url('../images/sprite.png');
    background-attachment: scroll;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}
ul.sprite li a.rss span {
    background-position: 0 0;
}
ul.sprite li a.twitter span {
    background-position: -32px 0;
}
ul.sprite li a.facebook span {
    background-position: -64px 0;
}
ul.sprite li a.technorati span {
    background-position: -96px 0;
}
ul.sprite li a.friendfeed span {
    background-position: -128px 0;
}

That was quite simple is’n it?

We have also included a sprite.psd inside the images folder using which you can make the sprite!

jQuery Easing:

By default jQuery supports only two easing equation swing and linear. But if you include jQuery UI library, then you get access to all the easing functions! To include jQuery UI, just place this code just after including the jQuery framework:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

Then, just use any of the easing method given here to make your buttons animate even creatively!
Well that’s it folks! Hope you have enjoyed this plugin! Do use it wherever you want… Personal, commercial whatever! We have released our work under MIT License. So don’t bother impressing your clients with this cool piece of Plugin!

And don’t forget to give us feedbacks… And for once again do rate the project over jQuery Plugin page.

Online Demo[download id=”1″ format=”1″]

Change Log:

Version: 1.0.1 -> Birth of the Plugin
Version: 1.0.2 [Dated: 2.8.10] -> Fixed IE bug

6 comments

Pingback: Fade In n Out Animation on hover w/ jQuery to make image Buttons | InTechgrity
Pingback: Sliding Hover animation using jQuery to make cool image buttons | InTechgrity
dragu August 9, 2010

Hi Swashata! I really want to use this jquery menu, but the download link isn`t working. Can You reupload it or send to my e-mail? Greetings from Poland
- Swashata Post authorAugust 9, 2010
  
  Hi dragu! Sorry for the broken link!… I have fixed it now… It was due to some misconfiguration of W3 Total Cache plugin we are using on our blog! Now you can download from the link above… Hope you find it useful…
  And thanks for dropping in 🙂
dragu August 10, 2010

Thank You! You have one of the best tutorials for rookie like me, so I think this will be useful 🙂
shahab March 1, 2012

how i put this in website plz send me the method i use your write method but its not working

Comments are closed.