嵌套在 DIV 中的顺序 FadeIn 和 FadeOut 元素

Question

（大家好）我正在尝试创建一个场景，其中<li> 元素一个接一个地淡入和淡出 - 我可以开始工作了。

当我将鼠标悬停在当前正在制作动画的 <li> 元素上时，我还试图停止动画过程 - 我也可以开始工作。

但是，一旦将 <li> 元素设置为 display:none，我就无法显示它，而我必须等待动画循环播放。

这是我当前的 HTML 标记；

<div id="content">
    <li class="one">one</li>
    <li class="two">two</li>
    <li class="three">three</li>
</div>

但是我想如果我可以将<li> 元素嵌套在我的jQuery 不会隐藏的a 中，那么当我将鼠标悬停在<div> 上时，我可以将<li> 元素设置回display:block。

建议的标记；

<div id="content">
    <div class="wrap"><li class="one">one</li></div>
    <div class="wrap"><li class="two">two</li></div>
    <div class="wrap"><li class="three">three</li></div>
</div>

但是，使用下面粘贴的我的 jQuery，您可以看到它只处理 <li> 元素，如果它们是 #content 的兄弟元素，而不是嵌套的元素。

jQuery(document).ready(function($) {
    $('#content li').hide();
    InOut($('#content li:first'));

    function InOut(elem) {
        elem.delay().fadeIn(1500).delay(5000).fadeOut(1500, function() {
            if (elem.next().length > 0) {
                InOut($(this).next());
            }
            else {
                InOut($(this).siblings(':first'));
            }

        });
    }

    $('#content li').mouseover(function() {
        $(this).fadeIn(500).stop(true, true);
    });
    $('#content li').mouseout(function() {
        if ($(this).is(":visible") == true) {
            InOut($(this));
        }
    });

});

为了举例，我在下面按顺序创建了当前动画的 Fiddle；

http://jsfiddle.net/pusher/TuGES/1/

我们总是感谢任何帮助。

谢谢！

Answer 1

要允许鼠标悬停在隐藏元素上，您必须不使用fadeOut()，因为这会将项目保留为 display: none 不会接收鼠标事件。相反，您需要将其保留为 0 的不透明度，这意味着您需要使用 fadeTo()。这是代码的固定版本（缩短了测试时间间隔）。

我已修复它，使其具有以下行为：

• 当您将鼠标悬停在淡出的项目上时，它会弹回完全可见并且所有动画都停止。
• 当您将鼠标悬停在淡入的项目上时，它会完全显示并且所有动画都停止。
• 当您将鼠标悬停在可见的项目上时，它会将该项目保持为可见性，并且不会启动动画。
• 当您将鼠标移出某个项目时，它会启动动画。
• 当您将鼠标悬停在隐藏的项目上时，它会立即显示该项目并隐藏所有其他项目。

修复的关键之一是停止所有动画和.hide() 所有其他元素（可能已经动画），因为这是.fadeOut() 的正常完成状态，这将允许动画再次启动这是正常的方法。隐藏所有元素后，我们显示当前元素并将其不透明度设置为 1 以使其处于完全可见状态。

jQuery(document).ready(function($) {
    $('#content li').css("opacity", 0);
    InOut($('#content li:first'));

    function InOut(elem) {
        elem.delay().fadeTo(1500, 1).delay(1000).fadeTo(1500, 0, function() {
            if (elem.next().length > 0) {
                InOut($(this).next());
            }
            else {
                InOut($(this).siblings(':first'));
            }

        });
    }

    $('#content li').mouseover(function() {
        $(this).siblings().add(this).stop(true, false).css("opacity", 0);
        $(this).show().css("opacity", 1);
    });
    $('#content li').mouseout(function() {
        if ($(this).is(":visible") == true) {
            InOut($(this));
        }
    });
});​

还有，这是一个工作演示：http://jsfiddle.net/jfriend00/k4ASz/

附：我也不得不稍微更新一下你的 CSS，因为页面中的所有项目始终存在，布局有点不同。

Answer 2

当您将显示设置为“无”时，该元素实际上不再可以在代码之外访问。它以编程方式使更改内容变得很棒，但对于用户的可点击内容却不是那么好。我建议改用可见性：隐藏。