1
00:00:00,510 --> 00:00:05,550
Jake where are you chaining allows us to run multiple Jake where he commands one after the other on

2
00:00:05,550 --> 00:00:06,450
the same element.

3
00:00:07,200 --> 00:00:10,550
Let's take a look at an example on this page.

4
00:00:10,680 --> 00:00:17,000
We have a div element the blue square when we click the enemy button.

5
00:00:17,030 --> 00:00:21,250
The square slides up within a timeframe of two seconds.

6
00:00:21,400 --> 00:00:26,530
And it also changes the color to red once that sequence is completed.

7
00:00:26,590 --> 00:00:35,730
The square slides down within the same time frame slides up and slides down so a single event the click

8
00:00:35,820 --> 00:00:40,410
of the enemy button triggers a color change in two actions.

9
00:00:40,410 --> 00:00:47,040
Slide up and slide down which run one after the other on the same element.

10
00:00:47,190 --> 00:00:48,770
So let's take a look at how this works.

11
00:00:55,970 --> 00:01:00,380
In our body take we have two elements.

12
00:01:00,640 --> 00:01:06,960
One div with the I.D. square in our animate button.

13
00:01:07,030 --> 00:01:11,890
This will trigger the animation as we saw in the demonstration.

14
00:01:11,980 --> 00:01:18,340
We have a style sheet that defines what the square looks like a blue background to start with.

15
00:01:18,340 --> 00:01:25,120
Within height of one hundred and sixty pixels a small margin at the top and absolute position

16
00:01:30,150 --> 00:01:40,850
our script starts with a click even on the button when the button is clicked a CSX change event is applied

17
00:01:41,300 --> 00:01:43,710
to the element with the ideas squared.

18
00:01:44,090 --> 00:01:45,050
So our blue square

19
00:01:48,330 --> 00:01:56,370
turns into red and so we've specified the background properties where we want to change and we want

20
00:01:56,370 --> 00:02:01,230
to change it to red when the button is clicked.

21
00:02:01,350 --> 00:02:05,700
In addition to this SS change we also have two actions

22
00:02:08,820 --> 00:02:17,910
first the element will slide up at a speed of two seconds and after that the element will slide down

23
00:02:20,480 --> 00:02:26,740
with the same speed.

24
00:02:26,810 --> 00:02:28,480
This is known as chaining.

25
00:02:28,580 --> 00:02:34,460
We are chaining two actions together on the same element.

26
00:02:34,520 --> 00:02:38,550
Square and so that's how that works.