Alright, let's talk about callback functions.
In a callback function.
Really all a callback function is,
is a function of a little piece of code that should run after something is done running.
So for instance, we have a selector here and we said Register a click event listener.
And anytime that's supposed to run,
execute this function, that's a callback function.
So once a click happens, do a thing.
We can also lake select our box from our previous lesson.
And we could say something like fade out.
And we could give this parameter,
let's say it's going to take 1.5 seconds.
And then we could give this a function as well.
And this is a callback function.
And so we gave it a parameter,
how long it should take comma function and then just a regular function here.
And then we can say console dot log.
Fade-out is complete.
Let's go ahead and give this a shot and let's go to our console here.
It's going to fade out. Fade out is complete.
And we can do this with a lot of different things we could do fade
out and we could do slide up.
As, as fatal, it is complete.
This should have said slide out is complete button regardless,
the callback function still works.
And so really all we're doing here is if we simplify this a little bit,
we're saying select the box,
slide up, take 1.5 seconds when you're done
that console log ODE is complete or slideUp is complete.
We can do this with a lot of different animation.
So we've got slide,
we could do fade.
We could use it with togas as well.
So as you toggle,
fade is gonna take 1.5 seconds to fade in or fade out.
And fade effect is complete.
And so let's go ahead and click this.
Oh, something is not right here.
It's not toggled, fade,
it is fade toggle.
I get that backwards every time and every now and then.
And so all that did was automatically fade out because it was already visible.
Now let's wrap this in a event listener.
Select that button, dot on click function.
Due to, due to due, and you see them going pretty fast here it gets,
it gets a lot easier over time.
And you can see this starting to be a pattern in jQuery,
we have a selector,
do a thing, a Function Selector,
do a thing, do a thing right there.
A Function Selector, do a thing, a function.
And let's go ahead and get rid of this.
1500 milliseconds or 1.52, fade in, fade out.
And let's just give this a shot to click it.
Fades out.
Fade effect is complete. You can see it right down there.
Perfect. Look at that.
That is working exactly the way we want it to work.
Now a callback function is really useful if something is faded out,
maybe you want to then remove it.
So let's do this, let's do fade out.
And we can do this dot remove.
And so once this is faded out,
because right now you can see that if we click this, it's going to fade out.
It's still actually in our DOM.
Maybe we want it to be completely removed for whatever reason.
We could click this.
And you notice that it actually completely
remove yourself from the document object model.
So see this down here.
Watch that it disappears,
it becomes completely removed.
And now we can't click this if it's rendered useless.
So if you need a onetime event,
that is a good way to do it.
Now you actually don't need to practice anything with callback functions.
We've been writing callback functions this entire time.
So little bit of a surprise that are callback functions,
you are pretty much a grandmaster Wizard at callback functions at this point in time.
In the next lesson, let's talk about adding our own animations.