CODEWITHSUNDEEP
jquery
Dips
Dips

Reputation: 3290

Mouse hover effect bugging

enter image description hereI am having an issue on mouse hover effect. My code is below and jsfiddle link

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

If place my mouse in and out for few times and leave, the effect keep happens for while. What I want is until the first mouse hover effect finishes I don't want to keep going the effect for a while. Please ask me if you don't understand this.

Thanks guys for your time, I figure it out a simple way below Just use fade to function 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);
});

Upvotes: 4

Views: 324

Answers (4)

Marty
Marty

Reputation: 39476

To add some context to your own solution:

.fadeIn() and .fadeOut() modify the display property (toggling between block and none respectively).

Using fadeTo() will modify the transparency only, omitting the behaviour of the element needing to complete its transition between visible and invisible. Because of this, .stop() will function as expected.

Also, using .stop().fadeTo() will give the same result as using:

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

Upvotes: 2

user671253
user671253

Reputation:

You can prevent Animation Queue Buildup. Simply call the .stop() method before animating again.You can even implement something like the hoverIntent plugin that can add a slight delay before running the animation. However, instead of calling onMouseOver and onMouseOut functions immediately, this plugin tracks the user's mouse onMouseOver and waits until it slows down before calling the onMouseOver function... and it will only call the onMouseOut function after an onMouseOver is called.

Upvotes: 0

Andreas Wong
Andreas Wong

Reputation: 60594

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

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

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

Upvotes: 3

Muhammad Sannan Khalid
Muhammad Sannan Khalid

Reputation: 3137

try out this code. 

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

Upvotes: 0

Related Questions