Question

<嗨大家好）我正在尝试创建一个场景，其中<li>元素逐渐消失并逐渐淡出 - 我可以开始工作。

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

但是，一旦将<li>元素设置为display：none，我就无法显示<div id="content"> <li class="one">one</li> <li class="two">two</li> <li class="three">three</li> </div>元素，而是必须等待动画循环播放。

这是我当前的HTML标记;

<li>

但是我想如果我可以将<li>元素嵌套在一个不被我的jQuery隐藏的元素中，那么我可以将<div>元素设置回显示：当我将鼠标移到{时{1}}。

建议的标记;

<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));
        }
    });

});

为了举例，我在下面按顺序创建了当前动画的小提琴;

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

任何帮助总是受到赞赏。

谢谢！

Answer 1

当您将显示设置为“none”时，实际上不再能够在代码之外访问该元素。它以编程方式更改内容，但对于用户的可点击不太好。我建议使用visiblity：隐藏。

Answer 2

要允许鼠标悬停在隐藏元素上，您必须不使用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/

P.S。我不得不更新你的CSS因为页面中的所有项目一直都有，所以布局有点不同。

嵌套在DIV中的Seuqentially FadeIn和FadeOut元素

这是我当前的HTML标记;

建议的标记;

2 个答案: