CODEWITHSUNDEEP
javascriptjqueryhtmljquery-effects
AndreaNobili
AndreaNobili

Reputation: 43057

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

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:

Is it my reasoning correct or am I missing something?

Upvotes: 1

Views: 77

Answers (1)

mix3d
mix3d

Reputation: 4333

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.

Upvotes: 3

Related Questions