jQuery: interrupting fadeIn()/fadeOut()

javascript jquery fade
JamesBrownIsDead picture JamesBrownIsDead · Sep 1, 2010 · Viewed 7.5k times · Source

Let's say I've called $element.fadeIn(200). 100 ms later, something happens on that page and I want to interrupt that fade and immediately fadeOut(). How can I do this?

If you call calling $element.fadeIn(200).fadeOut(0), the fadeOut() only happens after the fadeIn() has finished.

Also, is there a way I can examine $element to determine if a fadeIn() or fadeOut() is running? Does $element have any .data() member that changes?

Answer

Andre Schweighofer picture Andre Schweighofer · Sep 7, 2011

stop() will only remove animations that are not executed yet.

use stop(true, true) to interrupt and remove the current animation too!

Related questions

Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

I'm trying to get a series of elements to fade in on scroll down when they are fully visible in the window. If I keep scrolling down, I do not want them to fade out, but if I scroll up, …

Read More
Simple fade in fade out div with jquery on click

THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference. HTML: <div><a href="#" id="btn">Show bank div and hide fancy div</a></…

Read More
Using fadein and append

I am loading JSON data to my page and using appendTo() but I am trying to fade in my results, any ideas? $("#posts").fadeIn(); $(content).appendTo("#posts"); I saw that there is a difference between append and appendTo, on the …

Read More