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

我如何摆脱这里的队列？

Answer 1

使用.dequeue（）函数和.stop（）

.dequeue().stop()

这里发现的优秀文章，我确定它会告诉你你想知道什么。

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

我也会使用。show() and .hide()而不是.toggle()来节省jquery的任何混淆。

修改：已更新

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

Example

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

Answer 2

你应该试试这个

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

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

2 个答案: