jQuery鼠标悬停切换 - 防止队列

Question

我有以下代码，当鼠标悬停在另一个div上时，它可以切换一个div的可见性。它工作正常，除非你反复悬停和移出，否则它会排队执行所有的切换：

$(document).ready(function() {
    $('.trigger').mouseover(function(){
        $('.info').toggle(400);
    }).mouseout(function(){
        $('.info').toggle(400);
    });
});

我尝试过这个方法，但似乎不起作用（它会影响切换的div的可见性，最终导致无法显示）。

$(document).ready(function() {
    $('.trigger').mouseover(function(){
        $('.info').stop().toggle(400);
    }).mouseout(function(){
        $('.info').stop().toggle(400);
    });
});

我该如何清除这里的队列？

- Dan

---

你真的应该缓存 .info 选择器。 - Stephen

如果你要缓存选择器Stephen，那么你也可以缓存整行代码...不幸的是，这并不能帮助Dan解决他的问题。有些人会简化他们的代码以便让别人更容易回答问题。我也同意John的观点- Dan应该接受成为参与者而不是用户。 - Blowsie

你只接受了7个问题中的1个，请点击“我的问题”，然后为每个问题接受你选择的答案。 - Blowsie

很不幸，似乎你是那些问题没有正确答案的少数人之一 :( ，我仍在寻找解决你问题的方法。 - Blowsie

Answer 1

使用 .dequeue() 函数和 .stop() 函数。

.dequeue().stop()

这里有一篇很棒的文章，可以让你找到想要了解的内容。

http://css-tricks.com/examples/jQueryStop/

此外，我会使用 .show() 和 .hide() 而不是 .toggle()，这样可以避免 jQuery 出现混淆。

编辑：已更新

问题在于动画没有完成，在使用 true, true 时，它会在开始另一个动画之前跳到最后。

示例

$('.trigger').mouseover(function() {
    $('.info').stop(true, true).show(400);
}).mouseout(function() {
    $('.info').stop(true, true).hide(400);
});

- Blowsie

---

谢谢。代码现在是这样的： <code> $(document).ready(function() { $('.trigger').mouseover(function(){ $('.info').dequeue().stop().show(400); }).mouseout(function(){ $('.info').dequeue().stop().hide(400); }); }); </code> 但是，这仍然与我在原始帖子中的第二个片段相同。它似乎仍然排队动画，但变得非常混乱，什么也不显示。 - Dan

但是我有一个疑问，当我在p标签上方时，p标签会被隐藏，如何防止class信息被隐藏？ - srini

Answer 2

你应该尝试这个

$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });

- Maurice Dévé

---

今天最佳答案。 - jDelforge