jQuery 鼠标悬停时的jQuery切换 - 防止排队
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4216764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery toggle on mouseover - prevent queue
提问by Dan
I have the following code which toggles the visibility of a div when another div is moused over. It works fine, except if you mouse over and out repeatedly it queues all of the toggles:
我有以下代码，当鼠标悬停在另一个 div 上时，它会切换 div 的可见性。它工作正常，除非您反复将鼠标悬停并移出，它会将所有切换排入队列：
$(document).ready(function() {
$('.trigger').mouseover(function(){
$('.info').toggle(400);
}).mouseout(function(){
$('.info').toggle(400);
});
});
I've tried this, but it doesn't seem to work (it creates problems with the visibility of the toggled div and ends up not showing it at all)
我试过这个，但它似乎不起作用（它会导致切换 div 的可见性出现问题，最终根本不显示它）
$(document).ready(function() {
$('.trigger').mouseover(function(){
$('.info').stop().toggle(400);
}).mouseout(function(){
$('.info').stop().toggle(400);
});
});
How do I get rid of the queue here?
我如何摆脱这里的队列？
回答by Blowsie
Using the .dequeue() function and .stop()
使用 .dequeue() 函数和 .stop()
.dequeue().stop()
Excellent article on this found here, im sure it tells you what you want to know.
在这里可以找到关于此的优秀文章，我相信它会告诉您您想知道的内容。
http://css-tricks.com/examples/jQueryStop/
http://css-tricks.com/examples/jQueryStop/
Also I would use .show() and .hide()instead of .toggle()just to save jquery any confusion.
我也会使用 . show() and .hide()而不是.toggle()只是为了节省 jquery 任何混乱。
Edit: Updated
编辑：更新
The problem is the animation isnt finishing, using true, true it jumps to the end before starting another.
问题是动画没有完成，使用 true, true 它在开始另一个之前跳到最后。
$('.trigger').mouseover(function() {
$('.info').stop(true, true).show(400);
}).mouseout(function() {
$('.info').stop(true, true).hide(400);
});
回答by Maurice Dévé
You should try this
你应该试试这个
$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });
