鼠标悬停时的 jQuery 切换 - 防止队列
我有以下代码,当鼠标悬停在另一个 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);
});
});
我如何摆脱这里的队列?
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:
$(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)
$(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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用 .dequeue() 函数和 .stop()
在这里找到了关于此的优秀文章,我确信它会告诉您您想知道的内容。
http://css-tricks.com/examples/jQueryStop/
我也会使用 .< code>show() 和 .hide() 而不是
.toggle()
只是为了避免 jquery 的任何混乱。编辑:已更新
问题是动画没有完成,使用 true, true 它会在开始另一个动画之前跳到结尾。
示例
Using the .dequeue() function and .stop()
Excellent article on this found here, im sure it tells you what you want to know.
http://css-tricks.com/examples/jQueryStop/
Also I would use .
show() and .hide()
instead of.toggle()
just to save jquery any confusion.Edit: Updated
The problem is the animation isnt finishing, using true, true it jumps to the end before starting another.
Example
你应该尝试这个
You should try this