Question

I have a page which has an unordered list down one side, to switch between different containers with images inside to the right of the list.

The page in question is at the following URL with the JQuery code in the head tag:

http://dev.bathroomwarehouse.com/bathrooms.html

After clicking an item on the left as soon as the page has loaded (for example ‘Burgundy’) the images to the right (encapsulated by a div container) disappears without animation, despite the ‘fadeOut’ function in JQuery being used.

After the first change, the fadeOut function acts as expected, and the div to the right fades out, and the new div fades in.

Can anyone help figure out why this is happening?

The code in question is below:

JQuery

$(document).ready(function () {
        $(".catList li").click(function() {

            $(".catList li").removeClass('selectedRange');
            $(this).addClass("selectedRange");
            var clickedItem = $(this).index(".catList li");

            $(".images div").stop().fadeOut('slow', function () {
                $(".images div").removeClass("selectedImageGroup");
            });

            $(".images div:eq(" + clickedItem + ")").delay(750).fadeIn(function () {
                $(".images div:eq(" + clickedItem + ")").addClass("selectedImageGroup");
            });


        });
    });

HTML:

<div class="imageSelector">
        <ul class="catList">
            <li class="selectedRange"><h2>Ivory</h2>Modernist suite featuring with a touch of nostalgia…</li>
            <li><h2>Burgundy</h2>Contemporary classic...</li>
            <li><h2>Evergreen</h2>Minimalist with a unique shower feature...</li>
        </ul>
        <div class="vertLine">&nbsp;</div>
        <div class="images">
            <div class="imageGroup selectedImageGroup">
                <table class="imageGroupTable">
                    <tr>
                        <td colspan="3" class="imageGroupMainImage">
                            <img src="img/ImageBrowser/B1/Main.jpg" alt="" />
                        </td>
                    </tr>
                    <tr class="imageGroupSmallImages">
                        <td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td>
                    </tr>
                </table>
            </div>
            <div class="imageGroup">
                <table class="imageGroupTable">
                    <tr>
                        <td colspan="3" class="imageGroupMainImage">
                            <img src="img/ImageBrowser/B2/Main.jpg" alt="" />
                        </td>
                    </tr>
                    <tr class="imageGroupSmallImages">
                        <td><img src="img/ImageBrowser/B2/Img1.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B2/Img2.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B2/Img3.jpg" alt="" /></td>
                    </tr>
                </table>
            </div>
            <div class="imageGroup">
                <table class="imageGroupTable">
                    <tr>
                        <td colspan="3" class="imageGroupMainImage">
                            <img src="img/ImageBrowser/B1/Main.jpg" alt="" />
                        </td>
                    </tr>
                    <tr class="imageGroupSmallImages">
                        <td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td>
                        <td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td>
                    </tr>
                </table>
            </div>

        </div>
    </div>

Answer 1

It’s because you have display: block!important; overriding display: none; on your container div. (I can’t explain why it doesn’t work, but that is the cause of the issue.) It works after clicking once because it sets the inline style to display:block;. If you remove the CSS line of display:none for the element, the fade works on the first as well.

Example breakage: not working, working