jQuery toggle on mouseover - prevent queue
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);
}开发者_C百科).mouseout(function(){
$('.info').stop().toggle(400);
});
});
How do I get rid of the queue here?
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.
Example
$('.trigger').mouseover(function() {
$('.info').stop(true, true).show(400);
}).mouseout(function() {
$('.info').stop(true, true).hide(400);
});
You should try this
$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });
精彩评论