fadeIn & fadeOut seem to cause an overlap

Question

Please see this jsfiddle: http://jsfiddle.net/kZA8D/

Basically, whenever I move through / past the link fast, both the college_box and landing_login_form divs appear. It might take a few times to reproduce, but it ends up looking like this:

What's going on? I have a simple hover function, I don't see why this glitch is happening...

Answer 1

updated link: http://jsfiddle.net/J67Dr/1/

Its a queueing problem and in this case .stop() is not going to cut it, because its two different elements. So you will end up in scenarios where one element is hidden but still has animation queued while the other element is animating. I recommend you use both .stop() as a best practice and .dequeue as showing in the fiddle.

Option 2

http://jsfiddle.net/4jv6B/

Use just .stop but fade a wrapper element rather than the items themselves. Because of some weirdness (see the comments) I recommend option 2. Was trying to preserve your DOM, but oh well.

Answer 2

As mentioned in another answer there are animations in the Que and since you don't remove them they stack like you experienced.. a method for fixing this is the .stop(true) which stops the animation on the element you appended the method to and clears the que (hence "true")

This fiddle: http://jsfiddle.net/kZA8D/4/ kind of fixes it, (a small rewrite of your fiddle) but it bugs because of the callback functions.

Answer 3

It's basically that one animation is starting before the other finished.

I am updated your fiddle to solve this. one second.

Answer 4

It's happening because there are still animations on the event queue once you add some other animations. You might want to take a look at the .stop() function for jQuery.