Question

I’ve recognized a behaviour of the jQuery fadeIn() function, which seems wrong to me.

These to 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 actually example 1 behaves strange. I’ve created an example page, where you can test it yourself:
http://neo1.fomalhaut.uberspace.de/virtualGuitar/example.html

The upper one is the one that does not work correctly. If you enter the red div with the mouse, the blue div will start fading in. Leave it while it’s still fading in. Now it stops fading in and begins to fade out. If you now reenter it, while it’s fading out, it will just freeze, although it should again start to fade in. But it doesn’t.

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

Now could someone tell me that I’m right, and that this behavior should not occur, because fadeIn and fadeOut are just like fadeTo with 1 and 0 as target opacity? Or am I mistaken and this is supposed to be like that, because of some reason?

JQuery Version is the latest one (1.7.2), tested in Chrome, Firefox and Opera.

Answer 1

Your problem is that .stop() is setting a new opacity style on the element, at wherever you where when .stop() was run. So now jQuery thinks the opacity it should be animating to is where it was when it was stopped during the fadeOut sequence.

You could use fadeTo(), as you showed in the demo. Or you could use something like:

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

The toggle option will remember your maximum/minimum values. So if you set the fadediv as opacity: 0.5 in CSS it will just animate between 0 and 0.5.