jquery - 鼠标悬停时的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);
});

Answer 2

你应该试试这个

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