Animating opacity doesn't work in Internet Explorer
I'm experimenting with jQuery plugins. I have this code to fade in a "lightbox":
- $('#cleverbox')
- .css({ opacity:0, visibility:'visible' })
- .animate( {opacity:1}, 2000 );
It works fine on Firefox and Chrome, but in IE (7 and 8) and Opera the element just appears rather than being faded in. I've seen a few solutions posted online but have yet to find a solution that works. I have an example page if that helps. I'm also having a few other problems:
- In Internet Explorer (7 and 8), the first thumbnail never displays the lightbox (the onload event never fires). But the others work fine.
- In IE7, the code to fix the ClearType bug doesn't work. $(this).css( 'opacity', '' ) should remove the opacity style (in this case, the 'filter' property) but it doesn't remove it. I also tried to remove the filter property. In IE's dev tools it still has style="filter: ;"
- In Opera, it never runs after it has loaded once. In other words, if an image is in the browser cache the onload event never fires.