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?

Answer 1

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);
});