Mouse hover effect

Question

I have a problem with the mouseover effect. My code below and jsfiddle link

$(".first").hover(function() { $(this).children('.second').fadeIn('500'); }); $(".first").mouseleave(function() { $(this).children('.second').fadeOut('500'); }); 

If you insert and insert the mouse several times and leave, the effect is saved. I want until the first mouseover effect is over, I do not want to continue to act for a while. Please ask me if you do not understand this.

Thanks guys for your time, I figured it out in a simple way below Just use fade to work instead of fade in, then it works. Here is the code and demo

 $(".first").hover(function() { $(this).children('.second').stop().fadeTo('slow',1); }); $(".first").stop().mouseleave(function() { $(this).children('.second').stop().fadeTo('slow',0); }); 

Answer 1

To add context to your own solution:

.fadeIn() and .fadeOut() change the display property (switch between block and none respectively).

Using fadeTo() will only change transparency, omitting the behavior of the element necessary to complete its transition between visible and invisible. Because of this, .stop() will function properly.

In addition, using .stop().fadeTo() will give the same result as when using:

 .stop().animate({ opacity: 0.5 }, 1000); 

Answer 2

http://jsfiddle.net/LTJe6/8/

I changed it so that it stops the animation when you enter the child and set the opacity to 1

  $(this).children('.second').stop().css({'opacity': 1}); $(this).children('.second').fadeIn('500'); 

Answer 3

try this code.

 $(".first").hover(function() { $(this).children('.second').fadeIn('500'); }); $(".first").mouseleave(function() { $(this).children('.second').hide(); }); 

Answer 4

You can prevent the extension of the animation queue. Just call the .stop() method before animating again. You can even implement something like the hoverIntent plugin , which can add a little delay before starting the animation. However, instead of immediately calling the onMouseOver and onMouseOut functions, this plugin monitors the onMouseOver user mouse and waits until it slows down before calling the onMouseOver function ... and it only calls the onMouseOut function after calling onMouseOver.