JQuery FadeOut function not occurring on the first attempt
<p>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.</p>

<p>The page in question is at the following URL with the JQuery code in the head tag:</p>

<p><a href="http://dev.bathroomwarehouse.com/bathrooms.html" rel="nofollow">http://dev.bathroomwarehouse.com/bathrooms.html</a></p>

<p>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.</p>

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

<p>Can anyone help figure out why this is happening?</p>

<p>The code in question is below:</p>

<p>JQuery</p>

<pre><code>$(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");
            });


        });
    });
</code></pre>

<p>HTML:</p>

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

        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
