9

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?

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Dan
  • 5,836
  • 22
  • 86
  • 140
  • You really should cache the `.info` selector. – Stephen Nov 18 '10 at 16:02
  • 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 – Blowsie Nov 18 '10 at 16:05
  • You have only accepted 1 of 7 questions, click on my questions, then accept your chosen answer for each question – Blowsie Nov 18 '10 at 16:17
  • Unfortunately it seems your in the minority of people with questions with no correct answers :( , im still looking at a fix for your propblem – Blowsie Nov 18 '10 at 16:40

2 Answers2

16

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);
});
Blowsie
  • 40,239
  • 15
  • 88
  • 108
  • Thanks. The code is now like this: $(document).ready(function() { $('.trigger').mouseover(function(){ $('.info').dequeue().stop().show(400); }).mouseout(function(){ $('.info').dequeue().stop().hide(400); }); }); 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. – Dan Nov 18 '10 at 16:08
  • 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 – srini Oct 10 '12 at 10:49
2

You should try this

$(".trigger").hover(function() { $(".info").stop(true).toggle(400); });
aUXcoder
  • 1,048
  • 1
  • 20
  • 32
Maurice Dévé
  • 21
  • 1