1
00:00:00,420 --> 00:00:05,130
We can create custom animations using the J query animate method.

2
00:00:05,190 --> 00:00:07,590
Let's start with a basic example.

3
00:00:07,590 --> 00:00:13,340
We'll create a script that animates the movement of an element moving from one position to another.

4
00:00:13,350 --> 00:00:14,070
As seen here

5
00:00:17,700 --> 00:00:23,060
we can see that this where it moves from left to right after we click the Start animation button.

6
00:00:25,510 --> 00:00:31,260
Now let's go through this script to illustrate how this works.

7
00:00:31,270 --> 00:00:35,470
First we create a div element and give it an I.D..

8
00:00:35,470 --> 00:00:48,810
In this case square next we create our button with the label start animation.

9
00:00:48,830 --> 00:00:56,280
Next we create a style sheet in our head tag the style rules will be applied to this square so we'll

10
00:00:56,280 --> 00:01:04,660
set the I.D. selector to square.

11
00:01:04,680 --> 00:01:11,100
Now we need to create several style definitions that will be applied to the square the background of

12
00:01:11,100 --> 00:01:18,700
the square was glue the height in which was one hundred and sixty by one hundred and sixty pixels.

13
00:01:18,760 --> 00:01:25,900
There is a small margin to keep a bit of a gap between the square and the button.

14
00:01:26,040 --> 00:01:31,830
So we set the margin top attribute to five pixels.

15
00:01:31,880 --> 00:01:39,840
We've also assigned a position attribute and set it to absolute.

16
00:01:39,840 --> 00:01:45,600
The reason is that elements by default have a static position and we explain that in the CSF section

17
00:01:45,600 --> 00:01:51,860
of discourse static elements cannot be moved to manipulate the position.

18
00:01:51,930 --> 00:01:56,700
The element must be position is either relative fixed or absolute

19
00:02:02,750 --> 00:02:05,450
once this style rules are have been created.

20
00:02:06,820 --> 00:02:10,040
We can go ahead and create the script.

21
00:02:10,210 --> 00:02:19,320
Now the script is fairly straightforward restart with our document ready function.

22
00:02:19,330 --> 00:02:28,620
Next we apply a click event to the button and that's what specifies that the next action should begin

23
00:02:28,770 --> 00:02:33,020
when the button is clicked.

24
00:02:33,050 --> 00:02:36,290
Then we create the animate action

25
00:02:39,280 --> 00:02:40,810
and apply it to the square.

26
00:02:40,810 --> 00:02:45,240
So once the button is clicked we want to animate the square

27
00:02:48,410 --> 00:02:53,220
the enemy method has a few parameters.

28
00:02:53,340 --> 00:02:54,270
So first

29
00:02:56,800 --> 00:02:59,050
left eight hundred pixels.

30
00:02:59,050 --> 00:03:03,930
That means that the object will move eight hundred pixels from the left side.

31
00:03:04,330 --> 00:03:06,290
So it'll move in the right direction.

32
00:03:06,360 --> 00:03:15,220
Eight hundred pixels the next parameter 1000 is the speed at which the element moves.

33
00:03:15,320 --> 00:03:25,750
In this case we've set it to 1000 and that equates to 1000 milliseconds or one second and that's all

34
00:03:25,750 --> 00:03:26,840
there is to it.

35
00:03:26,860 --> 00:03:29,230
That's how this animation effect was created.