jQuery Animated Hover & PNG Shadow Fix Tutorial

View Demo

Here is Adrian Pelletier's awesome animate plugin. It's perfect in everyway! The only drawback to it is, it runs head-on into an ugly IE6/7/8 (9/10/11...?) PNG/jQuery bug (the bug does not affect jpg or gif). The bug is this... IE cannot animate a PNG image (in this case the shadow.png) and do Opacity at the same time. If you try to do this, and depending on the effect your trying to achieve, your nice pretty PNG will double in size and become black and/or get a ugly black border around it.

The fix is to either do one or the other just for IE! I did this by feeding IE ONLY a seperate piece of the plugin and overriding the real one. I also tweaked the one for IE to make the shadow "appear" to fade. It turned out nice! In the demo, to make it simple, I didn't bother fixing all of IE6's shortcomings. If you need this to work in IE6 as well (as I did!) feel free to study my recent project to see how I did it. And as always, just study the demo if you need clarification on anything.

In this order...

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery animate plugin.

Step 3: Download and link to the jQuery IE ONLY animate plugin (Note: place in IE CC's).

Step 4: jQuery animate CSS.

#nav {
margin:190px auto 0;
width:544px;
height:150px;
text-align:center;
list-style:none;
padding-left:31px;
}	
#nav li {
float:left;
width:105px; /* width of image */
height:105px; /* height of image */
position:relative;
margin-right:31px;
}
#nav a {
display:block;
height:105px;
text-indent:-999em;
background:url(images/animate.png);
}
/* #nav shadow */
#nav li img.shadow {
position:absolute;
bottom:-15px;
left:0;
}

Step 5: jQuery animate HTML.

<ul id="nav">
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
</ul>

ADVERTISE HERE