Question

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

有问题的页面位于以下URL中，头标记中包含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…</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

Answer 2

添加以下行：

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

之后

$(document).ready(function () {

JQuery FadeOut函数在第一次尝试时没有发生

2 个答案: