鼠标悬停时的 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() 和 .hide() 而不是 .toggle() 只是为了避免 jquery 的任何困惑。

编辑:已更新

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

Example

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