1
00:00:00,420 --> 00:00:05,190
The GK restart method can be used to stop an animation before it's finished.

2
00:00:05,190 --> 00:00:12,660
The stop method works for all animation types including sliding fading and custom animations here's

3
00:00:12,660 --> 00:00:18,550
an example of the stop method we can start the animation by clicking the start button.

4
00:00:19,110 --> 00:00:26,880
We can stop the animation at any point by pressing the stop on.

5
00:00:26,910 --> 00:00:33,710
Now let's take a look at the script.

6
00:00:33,860 --> 00:00:42,630
First we can see that all our elements are in the body tag the Start Button has the ideas start the

7
00:00:42,630 --> 00:00:48,540
stop button has the IP stop the square itself as the ideas square

8
00:00:51,810 --> 00:00:58,890
our style sheet simply defines the look of the square so we can see it has a blue background within

9
00:00:58,900 --> 00:01:08,170
height of 160 pixels 5 pixel margin from the top and the position of absolute and we've been over this

10
00:01:08,170 --> 00:01:17,740
in a previous exercise as well so let's go right to this script in the script we can see that first

11
00:01:17,740 --> 00:01:25,270
we've attached a click event to the start button once to start button is clicked the square div element

12
00:01:25,300 --> 00:01:33,100
animates it moves eight hundred pixels from the left position at a speed of three hundred milliseconds

13
00:01:35,790 --> 00:01:44,430
next we've attached a click event to the stop button when the stop button is quick the square animation

14
00:01:44,490 --> 00:01:47,820
is set to stop and that's using the stop method.