JQuery fadeIn / fadeOut error - fadeTo is working correctly

Question

I found out the behavior of the jQuery fadeIn () function, which seems wrong to me.

These code snippets should be equivalent:

function fadeIn1(){ $("#fadediv1").stop(true).fadeIn(2000); } function fadeOut1(){ $("#fadediv1").stop(true).fadeOut(2000); } 

and

 function fadeIn2(){ $("#fadediv2").stop(true).fadeTo(2000, 1); } function fadeOut2(){ $("#fadediv2").stop(true).fadeTo(2000, 0); } 

But in fact, Example 1 behaves strangely. I created an example page where you can check it yourself: http://neo1.fomalhaut.uberspace.de/virtualGuitar/example.html

The top one is the one that is not working properly. If you enter a red div with the mouse, the blue div will start to fade. Leave it while it still disappears. Now it stops fading and begins to fade. If you enter him again now and he disappears, he will simply freeze, although he will begin to disappear again. But this is not so.

In the bottom example, everything works as I expect, here I used the fadeTo function.

Now can someone tell me that I am right and that this behavior should not occur because fadeIn and fadeOut are similar to fadeTo with 1 and 0 as the opacity of the target? Or am I mistaken, and it should be so, for some reason?

The jQuery Version is the latest version (1.7.2) tested in Chrome, Firefox, and Opera.

Answer 1

Your problem is that .stop () sets a new opacity style for the element, wherever you are, when .stop () is run. So now jQuery thinks the opacity it needs to revive is when it was stopped during the fadeOut sequence.

You can use fadeTo () as shown in the demo. Or you can use something like:

$("#fadediv1").stop().animate({'opacity':'toggle'}, 2000);

The switch option will remember your maximum / minimum values. Therefore, if you set fadeiv to opacity: 0.5 in CSS, it will simply animate between 0 and 0.5.