jQuery toggle on mouseover - prevent queue

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?

Immolate

You really should cache the .info selector. – Duleba

If your going into to caching the selector Stephen, you may as well cache the whole line.... unfortunately this doesn't help Dan with his question anyway. Some people simplify their code for others to answer the problem in question. I also agree with John- Dan should accept become a participant not a user – Schwab

You have only accepted 1 of 7 questions, click on my questions, then accept your chosen answer for each question – Schwab

Unfortunately it seems your in the minority of people with questions with no correct answers :( , im still looking at a fix for your propblem – Schwab

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

Schwab

Thanks. The code is now like this: <code> $(document).ready(function() { $('.trigger').mouseover(function(){ $('.info').dequeue().stop().show(400); }).mouseout(function(){ $('.info').dequeue().stop().hide(400); }); }); </code> But again, this just acts the same as it did in my second snippet in the original post. It seems to still queue the animation but gets really confused and shows nothing. – Immolate

but i have one doubt i over the p tag but at that time p tag is hide how to prevent the class info hide – Vaporish

Answer 2

You should try this

$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });

Ternan

Best answer as today. – Voroshilovsk