Animating opacity doesn't work in IE or Opera

Question

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. There are a bunch of similar questions on SO but I have yet to find a solution that works.

I have an example page. I'm also having a few other problems:

1. In Internet Explorer (7 and 8), the first thumbnail never displays the lightbox (the onload event never fires).
2. 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. In IE's dev tools it still has style="filter: ;"
3. 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.

Answer 1

Have you tried wrapping opacity values in ', i.e. $(something).animate({opacity:'1'});? Works for me everytime.

Answer 2

I found a fix for the bug in Opera, thanks to the Opera community. I had this:

var imgLoad = new Image();
imgLoad.src = linkUrl;
imgLoad.onload = function() {
    //do some stuff here
}

However, if the image is in the browser cache it never fires because the loading part comes before the onload function. The solution is to move the src assignment below the onload function:

var imgLoad = new Image();
imgLoad.onload = function() {
    //do some stuff here
}
imgLoad.src = linkUrl;