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.