JQuery switch to mouse - prevent queue

Question

I have the following code that toggles the visibility of a div when another div is clouded. It works great, except when you hover over it and exit it, and it toggles all the switches:

$(document).ready(function() { $('.trigger').mouseover(function(){ $('.info').toggle(400); }).mouseout(function(){ $('.info').toggle(400); }); }); 

I tried this, but it doesn't seem to work (this creates problems with the visibility of the overloaded 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 line here?

Answer 1

Using the .dequeue () and .stop () Functions

 .dequeue().stop() 

Great article about it here, I'm 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() to save jquery in any confusion.

Edit: updated

The problem is that the animation does not end 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); }); 

Answer 2

You have to try this

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