Question

我有以下HTML作为示例：

<div id="header">
<div class="pagination"></div>
</div>

以及下面的jQuery默认情况下应该隐藏分页，但是当用户将标题悬停时将其淡入淡出，然后当它们移出标题时将其淡出：

            $(".pagination").hide();
            $("#header").mousemove(function()
            {
                $(".pagination").fadeIn(1500);
            });
            $("#header").mouseleave(function()
            {
                $(".pagination").fadeOut(1500);
            });

我遇到的问题是它会在用户悬停标题的情况下运行代码的次数相同，例如，如果我连续5次徘徊，则分页会淡入淡出5次。这不是我想要的功能，而是当用户悬停标题时简单的淡入和淡出。

有人可以帮忙吗？感谢。

Answer 1

编辑：添加了一些代码以避免重复淡入淡出。

     var running = false;

     $("#header").hover(function()
        {
            if(!running){
               $(".pagination").fadeIn(1500);
               running = true;
            }
        }, function()
        {
            $(".pagination").fadeOut(1500, function(){
                running = false;
            });
        });

现在，悬停效果只有在尚未运行时才会启动。

Answer 2

而不是fadeIn - fadeOut只需使用.fadeTo，就像我的

一样

JSFiddle DEMO

要解决您正在讨论的问题，请使用.stop()

祝你好运！

当悬停另一个元素时，jQuery显示/隐藏元素

2 个答案: