{ visibility: inherit; } jQuery Animated Hover & PNG Shadow Fix!

Here is a working example! 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.   via { visibility: inherit; } jQuery Animated Hover & PNG Shadow Fix!.

Leave a comment

Scroll to Top