JQuery悬停循环

Question

JQuery悬停循环

8

我有一个关于这段JQuery代码的问题：

$(".item").mouseenter(function(){
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}).mouseleave(function(){
    $(this).stop();
    $(this).addClass("item");
    $(this).removeClass("active");
    $(".item").show(700);
});

这是我的HTML代码：

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

我希望当我悬停在一项上时，其他项目会被隐藏。代码工作正常，但问题是如果在隐藏期间（700毫秒）悬停到另一个项目上，则会形成隐藏/显示项目的循环。我应该怎么做才能防止这种情况发生。

注意：我希望悬停的项目向左移动，而不是固定不动。 jsFiddle

- Mohsen Safari

糟糕的UI概念只是因为你无法避免浮动而导致了悬停。随着它们的动画，它们会改变位置。对于你来说，透明度动画是否可行？ - charlietfl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr_Green · Accepted Answer

你之前使用float: left来对li元素进行排列，这样会导致ul元素没有设置宽度和高度。使用以下CSS代码进行修正：

ul {
    overflow: auto;
}

我还对jQuery进行了一些更改：

$(".item").on('mouseenter', mEnter)
$('ul').on('mouseleave', function () {
    $('.item').stop();
    $('.active').removeClass("active")
        .addClass("item");
    $(".item").show(700);
});

function mEnter() {
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}

你将 mouseleave 事件应用于每个悬停的 LI 元素，而不是父元素即 UL。请参考这个实例。