Jquery Hover Flickering issue


#1

Hi, Hope u people will be fine.I have a problem with jquery hover animation. Here is my basic code:

http://jsfiddle.net/kr9pY/3/

in this demo u can see when we hover on div with id=“container”, a div with class=“nav” fades in. But the problem is that after doing this if i hover on div with class=“nav” the div fades out and in again, and if i mover cursor slightly within .nav div, it repeats this behavior repeatedly. I don’t want to this behaviour when we hover on .nav div or mover cursor within this div.

Thank, and sorry for my bad english.


#2
MFaisal said

Hi, Hope u people will be fine.I have a problem with jquery hover animation. Here is my basic code:

http://jsfiddle.net/kr9pY/3/

in this demo u can see when we hover on div with id=“container”, a div with class=“nav” fades in. But the problem is that after doing this if i hover on div with class=“nav” the div fades out and in again, and if i mover cursor slightly within .nav div, it repeats this behavior repeatedly. I don’t want to this behaviour when we hover on .nav div or mover cursor within this div.

Thank, and sorry for my bad english.

Try using

function() { $('.nav').stop().fadeOut(); }

for your hover-out function.

That stops the animations from competing. Hope that works for you :slight_smile:

EDIT: For your hover-over function, you might need to use

function() { $(’.nav’).fadeTo(‘fast’, 1); },

instead of plain .fadeIn() to get it to work properly.


#3

Oh, another solution would be to use hoverIntent http://plugins.jquery.com/project/hoverIntent


#4

@sevenspark: thanks for quick reply, i have used ur suggested solution but unfortunately it is not working u can see here:

http://jsfiddle.net/yprPn/2/

I have used hoverIntent but it is also not working. :frowning:


#5

Problem solved by only addition of a container div. chk this:
http://stackoverflow.com/questions/4627157/jquery-hover-flickering-issue


#6
MFaisal said

Problem solved by only addition of a container div. chk this:
http://stackoverflow.com/questions/4627157/jquery-hover-flickering-issue

Glad you got it worked out :slight_smile: Thanks for posting back the solution - I forgot stop() accepted parameters.