Animating opacity doesn't work in Internet Explorer

Animating opacity doesn't work in Internet Explorer

I'm experimenting with jQuery plugins. I have this code to fade in a "lightbox":

   
    
    
  1. $('#cleverbox')
    2. 
    
  2.  .css({ opacity:0, visibility:'visible' })
    3. 
    
  3.  .animate( {opacity:1}, 2000 );
    4.

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:

  1. In Internet Explorer (7 and 8), the first thumbnail never displays the lightbox (the onload event never fires). But the others work fine.
  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. I also tried to remove the filter property. 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.