1
00:00:00,550 --> 00:00:05,290
We can use J query to fade elements in a note using the fading and fade out methods.

2
00:00:06,330 --> 00:00:14,790
Here we have an example of the fade in method when we click the button a series of div elements gradually

3
00:00:14,790 --> 00:00:17,930
fade in we'll do that once more.

4
00:00:21,100 --> 00:00:29,630
You can see that each box fades in at a different time interval as well.

5
00:00:29,810 --> 00:00:33,620
Let's examine the code behind this HMO page to see how it works.

6
00:00:41,290 --> 00:00:44,110
First in our body tags.

7
00:00:44,110 --> 00:00:56,750
We have we've created for divs each div has an I.D. Div 1 d2 3 and 4 each div also has a class attached

8
00:00:56,750 --> 00:00:58,010
to it.

9
00:00:58,520 --> 00:01:00,110
The class name is box

10
00:01:02,780 --> 00:01:05,180
if we refer to our style sheet in the head.

11
00:01:05,180 --> 00:01:15,070
Take we can see that the box class has the following attributes a width of one hundred and sixty pixels

12
00:01:15,640 --> 00:01:20,540
height of one hundred sixty pixels display none.

13
00:01:20,550 --> 00:01:28,220
This means that none of these divs will be visible when the page initially loads background color red

14
00:01:29,150 --> 00:01:31,790
as we saw in the demonstration.

15
00:01:31,790 --> 00:01:35,870
Each div was red it had a red background color.

16
00:01:35,870 --> 00:01:44,500
Now if we go up to our script let's examine exactly what's happening to create this effect.

17
00:01:44,550 --> 00:01:53,400
Here we specify when the button is clicked each div should feed in one at a time.

18
00:01:53,470 --> 00:02:00,790
Remember that each div feeds in a different time intervals the time interval is specified here.

19
00:02:00,860 --> 00:02:10,570
It's the red number the first div has a default time interval in the next set of divs we have specified

20
00:02:10,600 --> 00:02:21,410
the the the time interval so Div 2 is one thousand three is three thousand and four is five thousand.

21
00:02:21,580 --> 00:02:25,540
That translates into one second three seconds in five seconds

22
00:02:28,380 --> 00:02:32,070
and this is the reason that each box fades in one after the other.

23
00:02:33,080 --> 00:02:35,420
Let's take a look at it again in our web browser

24
00:02:41,660 --> 00:02:42,580
so there it is.

25
00:02:42,650 --> 00:02:45,010
Each one feeding in one at a time.

26
00:02:48,420 --> 00:02:51,680
Give to it one thousand three thousand and five thousand

27
00:02:55,250 --> 00:03:01,700
now say we wanted the elements to fade out the fade out method works the same way.

28
00:03:01,750 --> 00:03:07,180
We simply need to change the fade in event to fade out.

29
00:03:07,180 --> 00:03:12,000
So let's go ahead and do that will change fading fade out

30
00:03:14,910 --> 00:03:15,690
on each event

31
00:03:27,250 --> 00:03:37,090
and since we're fading out in the opposite direction we also need to invert the time intervals.

32
00:03:37,160 --> 00:03:43,370
Next we need to remove the display none property because we want all the divs to be visible on page

33
00:03:43,370 --> 00:03:47,620
load.

34
00:03:47,680 --> 00:03:53,190
Once you've done that Save the file and we can refresh our web browser.

35
00:03:53,360 --> 00:04:00,860
So now we can see that all the divs are visible on page load and if we could defeat effect button it

36
00:04:00,880 --> 00:04:05,390
fate each day fades out in the opposite direction just as we intended.