1

（大家好）我正在尝试创建一个<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 隐藏的元素中，那么<li>当我将鼠标悬停在<div>.

建议的标记；

<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/

任何帮助总是受到赞赏。

谢谢！

4

2 回答 2

1

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

于 2012-04-05T23:41:11.003 回答
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/

PS我也不得不更新你的CSS，因为页面中的所有项目都在任何时候，布局有点不同。

于 2012-04-06T00:32:25.873 回答