Features of jQuery fadeIn, fadeOut, and fadeTo methods

So, consider what is wrong in the fadeIn and fadeOut methods, which, according to the documentation, are analogous to the fadeTo method, but have some peculiarities. At first glance, nothing, everything is written in the documentation. However, this is not always true, and not all features can be found in the documentation.

It all started with the simplest animation

The picture is replaced with another picture, but it is composed so that you can just hide and show another picture. Animation should work both independently and by hover.
The first thing that came to mind:

target1.fadeIn(duration); //    target2.fadeOut(duration); //    

Here, so simple and everything.
But with fast mouse movements back and forth, the animation queue accumulates, and after the pointer stops, we see “flashing” pictures for some time. Disorder. I fix it.

 target1.stop().fadeIn(duration); //    target2.stop().fadeOut(duration); //    

We try. Works! Handsomely…

But it was not there...

If you move the pointer very fast back and forth, you can “catch” the moment when the animation stops, as expected, after calling the stop () method , but the next animation does not work !
The code for operative checking of this error (for target, the initial value is opacity = 0):

 target.fadeOut().stop().fadeIn() 

As a result, the picture remained translucent instead of absolute non-transparency, as it should have been after fadeIn.
By the way, fadeOut is working as it should, or almost did not understand it completely. (There is something to brighten the nearest leisure instead of playing.)

Began to understand. Found an ancient bug: link to the tracker .
Under the link you can find some simple and quick examples of how to reproduce this error.
')
Almost a year and a half later, the developers decided that this was not a bug, but a feature , and closed the topic. Like, who's stopping, cut the patch, and we will think ...

Decision

The solution is simple - do not use fadeIn in such situations, and together with it can be fadeOut, and use fadeTo, which copes with the task set according to the documentation:

 target1.stop().fadeTo(duration, 1); //  fadeIn    target2.stop().fadeTo(duration, 0); //  fadeOut    

I thought that this was not order, and it would not hurt, at least, to write about it in Russian.
The documentation is unlikely to ever appear description of this "feature". Faster, nevertheless, make a patch, and I will do it at my leisure if someone does not overtake me.

In addition, I “caught” this bug even before using stop (), passing the queue parameter to false in fadeIn to start simultaneous animation. The result is the same - the animation “hung” at some opacity value close to zero.