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

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 2

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.

Answer 3

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 4

I experienced the same thing and discovered thanks to Artem's posts that the child elements of the table were not receiving the opacity change in IE8. Therefore it appeared at first glance that nothing was happening. I believe the reason that Artem's blank page example worked and the original poster's example did not is because there were no children in Artem's sample.

Adding the fadeTo on the child elements solved the problem for me. Old post, but it resolved my issue, so figured it's still relevant.