鼠标悬停时的jQuery切换 - 防止队列答案

【问题标题】：jQuery toggle on mouseover - prevent queue鼠标悬停时的jQuery切换 - 防止队列
【发布时间】：2011-05-12 03:11:44
【问题描述】：

我有以下代码在另一个 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);
    });
});

我如何摆脱这里的队列？

【问题讨论】：

你真的应该缓存.info选择器。
如果您要缓存选择器 Stephen，您不妨缓存整行...。不幸的是，无论如何这对 Dan 的问题没有帮助。有些人简化他们的代码以供其他人回答问题。我也同意 John-Dan 应该接受成为参与者而不是用户
您只接受了 7 个问题中的 1 个，点击我的问题，然后接受您为每个问题选择的答案
不幸的是，在少数人中，您的问题似乎没有正确答案:(，我仍在寻找解决您的问题的方法

标签： jquery queue toggle onmouseover

【解决方案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);
});

【讨论】：

谢谢。代码现在是这样的： $(document).ready(function() { $('.trigger').mouseover(function(){ $('.info').dequeue().stop() .show(400); }).mouseout(function(){ $('.info').dequeue().stop().hide(400); }); }); 但同样，这与我在原始帖子中的第二个 sn-p 中的行为相同。它似乎仍在排队动画，但真的很困惑并且什么也没显示。
但我对 p 标签有一个疑问，但当时 p 标签是隐藏的，如何防止类信息隐藏

【解决方案2】：

你应该试试这个

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

【讨论】：

今天的最佳答案。