This tutorial have been incorporated inside a plugin! Download and read about it here. Although it is good to read this tutorial, as this will show you the backend of the plugin
You might have seen some image buttons on websites which slides up on hovering over them… Actually I saw it first on one of our reader, Dhawal’s blog eTechBlast and thought of developing such set of buttons from scratch using jQuery. It was basically very easy as I just need to work with the animation function of jQuery. Although the coding was easy but still explaining it might just become useful for some people getting started with jQuery! So here is a complete post explaining how to make a Cool Sliding Image button using jQuery and CSS… Before you start here is the online demo and just in case you know jQuery and just want the code here is the download link of the files…
To know more about the coding read below…
#1: Strategy and Plans: The XHTML Codes
Basically we are going to hyperlink some images using anchor tag and then we are going to use jQuery to slide the image up on hovering over them. For proper image alignment and sliding animation we are going to put the images inside a list tag and then will style them using CSS. Here is basic XHTML code used for this project…
<div id="fadeanim">
<ul>
<li><a href="http://twitter.com/swashata"><img src="images/twitter.png" /></a></li>
<li><a href="http://friendfeed.com/swashata"><img src="images/friendfeed.png" /></a></li>
<li><a href="http://www.facebook.com/swashata"><img src="images/facebook.png" /></a></li>
<li><a href="http://picasaweb.google.com/swashata4picasa/"><img src="images/picasa.png" /></a></li>
<li><a href="http://technorati.com/people/technorati/Swashata"><img src="images/technorati.png" /></a></li>
<li><a href="http://digg.com/users/swashata"><img src="images/digg.png" /></a></li>
<li><a href="http://swashata.stumbleupon.com/"><img src="images/stumbleupon.png" /></a></li>
<li><a href="http://www.youtube.com/user/Swashata"><img src="images/youtube.png" /></a></li>
<li><a href="http://www.orkut.co.in/Main#Profile.aspx?uid=15548331932883821176"><img src="images/orkut.png" /></a></li>
<li><a href="http://www.blogger.com/profile/03512256744724769113"><img src="images/blogger.png" /></a></li>
</ul>
</div>
Clearly you can see that each images are contained inside a <li> tag. All the list tags are put inside a division <div> tag with id fadeanim. We are going to use this id as the CSS selector for both styling and jQuery coding!
#2: Styling up using CSS:
Now comes the styling part. Note that in the next jQuery coding step we are going to use some of the CSS properties… So we need to make CSS coding perfect in order to achieve a good animation. We are going to make the image buttons one after another horizontally. So we need to float the <li> tags… Also there will be some initial margin-top value for the images which will get changed on hover. Keeping all these in mind here is the CSS code that I have used:
#fadeanim {
width: auto;
min-height: 100px;
margin: 10px auto;
padding: 5px;
border: 1px dashed #066;
}
#fadeanim ul {
float: none;
width: 530px;
list-style: none outside none;
list-style-image: none;
list-style-type: none;
padding: 10px;
margin: 0px auto;
}
#fadeanim ul li {
float: left;
list-style: none;
margin: 0px 5px 0 0;
}
#fadeanim ul li img {
float: left;
margin-top: 10px;
}
#fadeanim ul li img:hover {
margin-top: 0px;
}
Note that I have used 10px initial margin for the images and on #fadeanim ul li img:hover I have set the margin-top=0; This is basically bringing the slide up animation thing!
Just add the CSS code inside <style type="text/css"> /* CSS Codes */ </style> and you are set to go! You may also add it up on an external css file and then link it!
Also do change the style of #fadeanim division block according to your need! [You might be thinking why I have named the division fadeanim, while it is showing sliding animation! Well its a surprise 😉 ]
After adding the CSS you will see that the images will jump 10px above its initial position when hovered! Now its time to smooth the animation using jQuery…
#3: Final touch using jQuery-
Now comes the main coding stuff! We are going to use jQuery to make the animation smooth…
Update: Note that before you use the following code, you need to attach the jQuery framework on your website template. I recommend that you let google to host jQuery for you. Simply enter the following code before the closing </head> of your template and you are done…
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Now that you have jQuery in your template, lets see the code:
function slide(userOptions) {
op = { //Preset values of the parameter
'CSS_selector':"#fadeanim ul li img", //The CSS selection of the image where you want the sliding effect
'initial_margin':"0px", //The initial maring-top of the image
'hover_margin':"0px", //The top margin on hover. As there is no way to get the :hover pseudo class so we need to mention this
'slideIn_time':600, //Time taken to slide up on hover in
'slideOut_time':400 //Time taken to slide down on hover out
};
op.initial_margin = $(op.CSS_selector).css("margin-top"); //We get the initial margin from the CSS file
op = $.extend({}, op, userOptions); //We extend the user Options using jQuery
$(op.CSS_selector).hover(
function() { //This is the hover in function
$(this).stop(); //Stops any animation being done on the button
$(this).css({marginTop:op.initial_margin}); //Sets the Top margin of the image to 10px. This is useful if the button was under any animation
$(this).animate({marginTop:op.hover_margin},op.slideIn_time); //Now animates the button to the defined hovered margin
},
function() { //This is the hover out function
$(this).animate({marginTop:op.initial_margin},op.slideOut_time); //Animates the top margin to the initial value
}
)
}
$(document).ready( //Now call the function when document is ready
function() {
slide();
}
);
The usage of every line is written there on the code! Just read thoroughly and you will understand the basic things… To know more about jQuery functions I recommend reading this post
Using the jQuery function:
You may think that the code is pretty short! But the fact is that it is intelligent enough to do many things automatically… For example:
- It will automatically get the initial margin of the image buttons from the Style sheet. So you don’t actually need to set the initial_margin option.
- You can apply the sliding animation on more than one container. Say you want to apply the sliding effect to all the images contained inside both divisions having ids fadeanim & slideanim. In that case you need to call the function two times using two different values of the parameter CSS_selector
$(document).ready(function() {slide({'CSS_selector':"#fadeanim ul li img"
});
slide({'CSS_selector':"#slideanim ul li img"
});
});
Parameters of the function:
The following parameters are available for the function
| Parameter | Description |
| CSS_selector | The CSS location of the image where you want the animation. There is no limitation that it has to be an image. But the CSS we have discussed is optimized for image sliding. So better you follow the method described here |
| initial_margin | The margin-top value of the image when it is not being hovered. Do not write it inside the parameter list to get the value from the Style Sheet [Note that default value of 0px will be assigned if the value is not supplied by the Style Sheet or the user]. Providing any other value of margin-top will overwrite the Style Sheet |
| hover_margin | You must supply this value. This is the margin-top value when the image is being hovered. Default is 0px |
| slideIn_time | Time required to slide the image up on hover. Provide an integer value if you want. Default is 600 [ms]. The default value is pretty slow… So do change it if you don’t like it! |
| slideOut_time | Time required to slide the image down on hover out. Also requires an integer value. Default is 400 [ms] |
You need to pass the parameters in the following manner:
slide({
'option1':value,
'option2':value,
'option3':value
});
Simply don’t write the parameter which you don’t want to change or want to use the default value. Also there will be no comma(,) after the last parameter.
So once again, here is the Online demo link and Package download link for your ease:
That was all about creating jQuery slide animated hyperlinked buttons. I hope you have liked it! Please give your feedback and spread the article as much as you can! Also if you have any doubt then feel free to ask!
You should speed it up a bit on demo … it's just painfully slow 🙂
My recent post Google napustio Kinu !
Hmm… Thanks for your feedback! I have changed the slideIn_time to 300 on the demo 🙂
Hey thanks for linking my blog
My recent post Make your Windows border transparent by True Transparency
Thanks for this.
Download package without survey: http://hotfile.com/dl/45752323/b74a264/slide_anim…
Pingback: Fade In n Out Animation on hover w/ jQuery to make image Buttons | InTechgrity
Hi,
nice demo!
but when I tried to implement it to my page I stumbled upon a bug or feature 😉
I’d like to put say 10 icons in two rows of five.
In that case sliding the mouse over the last icon in the upper row causes the icon to slide up (as expected), but the icons in the second row slide down. Also the first icon in the second row is moved directly below the up-slided icon in the first row.
(see my website if I’m not clear.)
I could reproduce the effect by changing main.css of the downloaded zip:
– change width of #fadeanim from auto to 300px
– add width: 50px; to #fadeanim ul li
can you help me out?
best regards,
Marcel
Hello,
I really like this function! I can’t figure out though how to change the direction from up/down to left/right.
Can you send me in the right direction how to do this?
Oke figured it out!
For those who are interested:
function slide(userOptions) {
op = { //Preset values of the parameter
‘CSS_selector’:”#fadeanim ul li img”, //The CSS selection of the image where you want the sliding effect
‘initial_margin’:”0px”, //The initial maring-top of the image
‘hover_margin’:”10px”, //The top margin on hover. As there is no way to get the :hover pseudo class so we need to mention this
‘slideIn_time’:250, //Time taken to slide up on hover in
‘slideOut_time’:250 //Time taken to slide down on hover out
};
op.initial_margin = $(op.CSS_selector).css(“margin-top”); //We get the initial margin from the CSS file
op = $.extend({}, op, userOptions); //We extend the user Options using jQuery
$(op.CSS_selector).hover(
function() { //This is the hover in function
$(this).stop(); //Stops any animation being done on the button
$(this).css({marginTop:op.initial_margin}); //Sets the Top margin of the image to 10px. This is useful if the button was under any animation
$(this).animate({marginLeft:op.hover_margin},op.slideIn_time); //Now animates the button to the defined hovered margin
},
function() { //This is the hover out function
$(this).animate({marginLeft:op.initial_margin},op.slideOut_time); //Animates the top margin to the initial value
}
)
}
$(document).ready( //Now call the function when document is ready
function() {
slide();
}
);
You also need to change the following margin-top to “0px” in the CSS like this:
#fadeanim ul li img {
float: left;
margin-top: 0px;
}
Hope it helps!
where the download link?
This is under a jQuery plugin now… You can find it here http://www.intechgrity.com/jquery-fade-n-slide-button-animator-plugin-by-itg/