Let's take a look at how we can fade an element in and fading element out.
So in this lesson I'm going to use my console.
And this is a cool little thing because in my code here, I'm using a CDN.
I have access to that little dollar sign,
that means jQuery, that little dollar sign.
And so I can select this box, I can say const.
Yeah, let's do const. Box is equal to and give it a selector.
And when I type dollar sign box,
it gives me this box the entire element.
It's actually a list of nodes technically,
but there's only one in there,
so we can work with just the one.
It's totally fine.
Now to fade something in an out,
all we have to do is doe dot box fade in.
Actually it's already faded.
Inlets fade out and it fades out.
We could also do dot box,
dot fade in and it fades in.
We can also give it a timeout or not a timeout but a timer.
How long should this take to fade out?
Let's say this is going to take 4.5 seconds.
So we do 4500 milliseconds,
so that's 4.5 seconds fade out and it's going to slow.
The Phaedo.
We can do the same thing with fade in.
Fade in, slowly fades in.
And there's actually another cool thing we can
do is we can give this a callback function,
will talk about callback functions a little bit later,
but we can tell it to do something when it is done fading into,
it is done fading out.
So what I want you to do is don't write your code necessarily in your editor this time.
Go ahead and just open up your console.
You can always right-click, inspect.
Click the Console tab. Select your box like what we did.
We've got const boxes equal to that box.
And then we did box that fade-out, box dot fade-in.
Give that a shot once that is working for you,
let's head on over to the next lesson,
where we learn how to toggle a fade and toggle a display.