How exactly works this use of the JQuery fadeout function that perform the fadein after the fadeout effect is completed?

Question

I am pretty new in JavaScript and JQuery and I have the following doubt about how exactly works this code that hide a div using a fadeout effect and in its place show another div using a fadein effect.

It works fine but I have some doubt about how exacty works.

So my code is the following one:

$("#inserimentoVariazioneAnticipo").fadeOut("slow", function() {
    $("#confermaVariazioneAnticipo").fadeIn("slow");
});

I know that it is implemented in this way to make sure that the fadeIn() function isa called AFTER that the fadeOut() function is completely performed but I am finding some difficulties to understand why is implemented in this way.

I know that in JavaScript I can pass a function as parameter of another function.

Reading the official JQuery documentaion ( http://api.jquery.com/fadeout/#fadeOut-duration-easing-complete ) I find that:

 .fadeOut( [duration ] [, easing ] [, complete ] ) 

so in this case I have that:

• DURATION is setted to slow

• EASING is not specified so I think that it automatically use the default value swing (but I am absolutelly not sure about it)

• COMPLETE : is the function that is performed after that the inovked fadeOut function completed its taks. So in this case after that complete its task it perform:

   $("#confermaVariazioneAnticipo").fadeIn("slow"); 

  that perform the fade in effect on the hidden div.

Is it my reasoning correct or am I missing something?

Answer 1

That is correct. The complete function is a callback that is called when the fade function is done. Callback functions are a common javascript pattern, especially for non-blocking code. You don't want to stop the rest of your javascript from running while the fadeout animation is playing. Instead, you simply say "hey, run this code when you're done", and then the rest of your script can continue.

For the duration, you can also specify milliseconds like .fadeOut(300)

Swing is always used unless specified. With vanilla jQuery, you only have two options for easing anyways, swing and linear, but there are ways to extend the easing functionality.