1
00:00:00,360 --> 00:00:05,100
We can use the fade to method to fade objects to a specified opacity.

2
00:00:05,100 --> 00:00:08,060
This example demonstrates how the effect will look.

3
00:00:08,280 --> 00:00:12,660
Here we have four divs shaped as blue squares.

4
00:00:12,660 --> 00:00:20,150
When we clicked the fade button each div fades to a lower opacity the opacity setting is different for

5
00:00:20,150 --> 00:00:21,670
each square.

6
00:00:21,680 --> 00:00:25,430
Let's take a look at the script to see how this how to apply this effect.

7
00:00:25,460 --> 00:00:29,770
Using J query will do the demonstration one more time

8
00:00:35,950 --> 00:00:37,420
now looking at the script.

9
00:00:37,540 --> 00:00:46,410
We can see we've we've applied the fade to method as the event for each div defeat to method allows

10
00:00:46,420 --> 00:00:48,350
two parameters.

11
00:00:48,370 --> 00:00:57,920
The first is the duration of time it takes for the opacity to reduce or increase to the specified amount.

12
00:00:57,950 --> 00:01:01,070
The second value is the desired opacity.

13
00:01:01,070 --> 00:01:06,170
In this case we've set the time interval to one second or 1000 milliseconds

14
00:01:09,030 --> 00:01:11,800
the opacity increases in increments of 20.

15
00:01:11,810 --> 00:01:16,380
For each div starting at 20 percent and ending it 80 percent.