Adding animations to a webpage can give it a polished appearance to visitors. One effect that can be added, is a bouncing effect on icons or graphics. In many ways this is much like the 'dock' in Mac OSX. Here's a few examples of the effect that I've done in the past.

visual example

Icon Bouncing

Above is a visual of what happens when an icon is hovered over. Notice how the Opera logo is slightly higher than the other icons? Click to see a live demo of this effect >>

HTML Structure

Here's the barebones HTML structure:

<ul id="icons"> <li><img src="image.jpg"></li> .... </ul>

CSS Code

The UL gets collapsed by floating the LI's left. One thing I'd recommend is giving the LI's a fixed height. Otherwise the list will be growing taller and shorter as users hover over it causing content on the rest of the page to shift around. Also the padding-top should equal the same amount of pixels as the margin-top in the jQuery code.

#icons { list-style-type: none; margin: 0px; padding: 0px; overflow: auto; } #icons li { float: left; height: 100px; padding: 10px 0px 0px 0px; } #icons li img { display: block; border: 0px; }

jQuery Code

This is actually quite simple. I used a custom animation since jQuery's built in effects cannot accomplish this. In my example below, I changed the marginTop & opacity properties on hover. Also, I added .stop() so that if a user hovers over the elements quickly it won't be lagging behind on the animations.

$(document).ready(function(){ $("#icons img").hover(function(){ $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400); },function(){ $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400); }); });

CSS Transitions

This same effect can be accomplished using CSS Transitions in browsers that support it:

#icons li img { -webkit-transition-property: margin-top, opacity; -webkit-transition-duration: .4s, .4s; } #icons li img:hover { margin-top: -10px; opacity: .75; }


Click to see a live demo of this effect >>