jQuery: interrupting fadeIn()/fadeOut()

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

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

You will get smooth fadeIn/Out effect by clearing queue but not jumping to the end, using .stop(true,false), but please notice that as FadeIn can be interrupted this way, FadeOut can not. I reported it as a bug like years ago, but noone cared. FadeIn only works if the object is hidden. But there is workaround... use FadeTo instead - it works on hidden as well as partially faded objects:

    $('.a').hover(function(){    $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!)},function(){    $('.b').stop(true,false).fadeOut(3000);});

Here's how it works: http://jsfiddle.net/dJEmB/

AFAIK fadeIn and fadeOut run synchronously, so no, I do not think you can interrupt them while they are running. You would have to wait until it is done executing.

If you call the stop method on the element it will stop all animations. The reason the fadeOut call in your example isn't called until after fadeIn is because animations are executed in a queue-like fashion.