CODEWITHSUNDEEP
javascriptjqueryfadeinfadeout
user701510
user701510

Reputation: 5763

how to properly prevent event stacking using stop() on image fadeIn and fadeOut?

I'm working on a program where the user hovers over an image and a clone of that hovered image is created. When the user removes the cursor from the hovered image, the clone image fades out and is removed. I added stop() before fadeIn() and fadeOut() to prevent the fade in and fade out animation event from stacking.

The problem is that if the mouse cursor enters and leaves the image multiple times very fast, the cloned image's fade in animation is only partially complete or the cloned image doesn't at all.

jsfiddle:

jsfiddle

Upvotes: 1

Views: 123

Answers (1)

peduarte
peduarte

Reputation: 1677

Ok, I know this is not what you asked for, but I have re-written your javascript in a way that I believe it works best.

Please have a look here http://jsfiddle.net/peduarte/L7VLU/1/

I added some comments explaining.

I think your version was a bit heavy. Creating the clone and appending every mouseover and then deleting it every mouseout.

I made it so the image is cloned on page load, and it's hidden. Then with the hover() function, you just fade it in and out as appropriate.

If you want to keep your code, then all you have to do is replace your current stop event with:

stop(true, true)

Hope this helps.

Upvotes: 2

Related Questions