IE8 jQuery FadeTo

Question

HTML markup:

    <ul id="portfolio"><li class="web">
   <span class="info">August 2007 <a href="http://awebsite.com" rel="external">visit</a></span>
   <a href="/assets/image.jpg" class="fancybox" rel="web">
    <img src="/assets/imagelarge.jpg" alt="Rising Star Ranch" />
    <span class="title">Some Title</span> Some other text...
   </a>
  </li>
 </ul>

jQuery:

$("ul#portfolio li").fadeTo("slow", 0.3);

In Firefox 3 and 3.5 as well as IE7, this behaves as expected and fades out all elements within the 'li'. In IE8, nothing is faded at all, and no Javascript errors show up when debugging.

The page is located at http://joecoledesign.com/portfolio

Thanks!

Answer 1

Very cool page Joe! The only thing that comes to mind WRT IE8 is that jQuery may not have caught up to it, or that something may be funny with your browser (such as your javascript settings may be tweaked).

Answer 2

Have you tried putting quotes around ul#portfolio li ? The selector is just a string, so it needs quotes. Without quotes doesn't work even in my Firefox.

$("ul#portfolio li").fadeTo("slow", 0.3);

Edit: OK, try to apply the fade to all subelements: span and img one by one for starters. It could indeed be an IE bug.

Edit: you are also missing a closing quote on the id="portfolio". Come on, man, try to work these things out before you post.

Edit: btw, the above works fine in IE8 - I just put it together and threw it up into a blank IE8 page - the whole thing faded.

Edit: It's quite possible something else on your page is doing it as it works fine standalone.

Answer 3

I was having the same problem with the transparency in IE8. Apparently IE8 has a different method of setting transparency than IE6/7. And unfortunately jquery has no way of animating transparency for IE8 yet. Why Microsoft, why?!?

http://mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/

That is what I found on the subject and after reading it I gave up on trying to get it to work since it confirmed what I suspected. Hopefully jquery will have this fixed in their next release.