I am calling fadeIn(200) and fadeOut(200) to show and hide a loading image on the page while any ajax scripts run on the page.
However I find that when a script takes less time than 200ms to run the element gets stuck with a partial opacity (such as 0.88) on it, presumably because the fadeIn() got interrupted at that point in the fade. After this, all future fades stop at that opacity, it never reaches a full opacity of 1 again.
Could this be related to the animation queue? Perhaps there's a way to force the animations to finish or somehow have opacity reset if it's interrupted?
A good solution this problem is to use fadeTo() instead of fadeIn() and fadeOut(). This function allows you to set a specific destination opacity which seems to eliminate the issue of getting stuck half-faded.
My specific solution was to:
Replace fadeIn(200) with fadeTo(200,1)
Replace fadeOut(200) with fadeTo(200,0)