jQuery toggle on mouseover - prevent queue
-
26-09-2019 - |
Question
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?
Solution
Using the .dequeue() function and .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/
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.
$('.trigger').mouseover(function() {
$('.info').stop(true, true).show(400);
}).mouseout(function() {
$('.info').stop(true, true).hide(400);
});
OTHER TIPS
You should try this
$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });