javascript - 第一次尝试时未发生 JQuery FadeOut 功能

Question

我有一个页面，它的一侧有一个无序列表，可以在列表右侧带有图像的不同容器之间切换。

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

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

在页面加载后单击左侧的项目（例如“Burgundy”）后，右侧的图像（由 div 容器封装）在没有动画的情况下消失，尽管使用了 JQuery 中的“fadeOut”功能。

第一次更改后，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…&lt;/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

这是因为你已经display: block!important;覆盖display: none;了你的容器 div。（我无法解释为什么它不起作用，但这就是问题的原因。）单击一次后它会起作用，因为它将内联样式设置为display:block;. 如果删除display:none元素的 CSS 行，淡入淡出也适用于第一行。

示例破损：不工作，工作

Answer 2

添加这一行：

$('.images div:first').show();

紧接着

$(document).ready(function () {