Hello,

I'm having a problem animating the opacity on the contents of a list element in IE8 (haven't tested the others yet).  There's a big grid of li elements, each holds a link that wraps up a color palette built by span tags.  The plan is that when you rollover one li, all of the other li's fade out.  It works correctly in Firefox and Chrome, but in IE8, the li element itself fades, but the contents of the li do not.  It makes it pointless.  Any tips?

The html:

1. <ul class="cl_results">
2.         <li>
3.                 <a href="#">
4.                         <span class="wrapper">
5.                                 <span>stuff....</span><span>stuff....</span><span>stuff....</span>
6.                         </span>
7.                 </a>
8.         </li>
   
9.         <li>
10.                 <a href="#">
11.                         <span class="wrapper">
12.                                 <span>stuff....</span><span>stuff....</span><span>stuff....</span>
13.                         </span>
14.                 </a>
15.         </li>
16.         ....
17. </ul>
    

The jquery (1.4):

    

     
$(document).ready(function() {
     
 $('.cl_results li').each(function() {
     
 $(this).hover(function() {
     
 $('.cl_results li').stop().css('opacity',0.1);
     
 $(this).stop().css('opacity',1.0);
     
 $("span.title", this).toggle();
     
 },
     
 function() {
     
 $(this).stop().css('opacity',0.1);
     
 $('.cl_results li').stop().css('opacity',1.0);
     
 $("span.title", this).toggle();
     
 });
     
 });
     
});
    

If you want to see the problem live, it's here:
http://www.codenamecuttlefish.com/project-files/palette-browser/

Thanks!