1
00:00:00,000 --> 00:00:04,130
Let's take a look at how we can fade an element in and fading element out.

2
00:00:04,125 --> 00:00:06,995
So in this lesson I'm going to use my console.

3
00:00:06,990 --> 00:00:12,990
And this is a cool little thing because in my code here, I'm using a CDN.

4
00:00:12,990 --> 00:00:18,210
I have access to that little dollar sign,

5
00:00:18,210 --> 00:00:21,500
that means jQuery, that little dollar sign.

6
00:00:21,495 --> 00:00:24,945
And so I can select this box, I can say const.

7
00:00:24,945 --> 00:00:32,865
Yeah, let's do const. Box is equal to and give it a selector.

8
00:00:32,865 --> 00:00:35,555
And when I type dollar sign box,

9
00:00:35,550 --> 00:00:38,950
it gives me this box the entire element.

10
00:00:38,945 --> 00:00:41,735
It's actually a list of nodes technically,

11
00:00:41,735 --> 00:00:43,015
but there's only one in there,

12
00:00:43,010 --> 00:00:44,720
so we can work with just the one.

13
00:00:44,720 --> 00:00:45,980
It's totally fine.

14
00:00:45,980 --> 00:00:47,870
Now to fade something in an out,

15
00:00:47,870 --> 00:00:52,700
all we have to do is doe dot box fade in.

16
00:00:52,700 --> 00:00:54,590
Actually it's already faded.

17
00:00:54,590 --> 00:00:57,490
Inlets fade out and it fades out.

18
00:00:57,485 --> 00:00:59,275
We could also do dot box,

19
00:00:59,270 --> 00:01:02,030
dot fade in and it fades in.

20
00:01:02,030 --> 00:01:06,140
We can also give it a timeout or not a timeout but a timer.

21
00:01:06,140 --> 00:01:08,120
How long should this take to fade out?

22
00:01:08,120 --> 00:01:11,800
Let's say this is going to take 4.5 seconds.

23
00:01:11,795 --> 00:01:14,385
So we do 4500 milliseconds,

24
00:01:14,389 --> 00:01:18,349
so that's 4.5 seconds fade out and it's going to slow.

25
00:01:18,350 --> 00:01:20,120
The Phaedo.

26
00:01:20,120 --> 00:01:22,820
We can do the same thing with fade in.

27
00:01:22,820 --> 00:01:30,960
Fade in, slowly fades in.

28
00:01:30,964 --> 00:01:33,594
And there's actually another cool thing we can

29
00:01:33,590 --> 00:01:35,870
do is we can give this a callback function,

30
00:01:35,870 --> 00:01:37,870
will talk about callback functions a little bit later,

31
00:01:37,865 --> 00:01:41,455
but we can tell it to do something when it is done fading into,

32
00:01:41,450 --> 00:01:43,430
it is done fading out.

33
00:01:43,430 --> 00:01:50,530
So what I want you to do is don't write your code necessarily in your editor this time.

34
00:01:50,525 --> 00:01:52,525
Go ahead and just open up your console.

35
00:01:52,520 --> 00:01:54,710
You can always right-click, inspect.

36
00:01:54,710 --> 00:01:58,720
Click the Console tab. Select your box like what we did.

37
00:01:58,715 --> 00:02:02,255
We've got const boxes equal to that box.

38
00:02:02,255 --> 00:02:05,375
And then we did box that fade-out, box dot fade-in.

39
00:02:05,375 --> 00:02:07,525
Give that a shot once that is working for you,

40
00:02:07,520 --> 00:02:09,220
let's head on over to the next lesson,

41
00:02:09,215 --> 00:02:13,595
where we learn how to toggle a fade and toggle a display.