javascript - 第一次尝试时未出现 JQuery FadeOut 函数

Question

我有一个页面，其中一侧有一个无序列表，用于在列表右侧的图像内部的不同容器之间切换。

有问题的页面位于以下 URL，其 head 标记中包含 JQuery 代码:

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

在页面加载后立即单击左侧的项目(例如“Burgundy”)，尽管使用了 JQuery 中的“fadeOut”功能，但右侧的图像(由 div 容器封装)会消失而没有动画.

第一次更改后，fadeOut 函数按预期运行，右边的 div 淡出，新的 div 淡入。

谁能帮忙弄清楚为什么会这样？

有问题的代码如下:

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

这是因为您的容器 div 上有 display: block!important; 覆盖 display: none;。 (我无法解释为什么它不起作用，但这就是问题的原因。)它在单击一次后起作用，因为它将内联样式设置为 display:block;。如果您删除该元素的 display:none CSS 行，淡入淡出也会在第一个元素上起作用。

破损示例:not working , working