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

我如何摆脱这里的队列？

Answer 1

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

.dequeue().stop()

在这里发现的优秀文章,我确定它告诉你你想知道什么.

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

我也会用.show() and .hide() 而不.toggle()只是为了节省jquery任何混乱.

编辑:已更新

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

例

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