1 00:00:09,190 --> 00:00:14,590 Hi, everybody, in this video, we're going to talk about the animated method in the previous video, 2 00:00:14,590 --> 00:00:17,920 we saw some cool effects that we can do with Jake Wari. 3 00:00:18,100 --> 00:00:25,690 So we learn how to hide and show elements and we learn how to do this using a Faid effect or a sliding 4 00:00:25,690 --> 00:00:26,320 effect. 5 00:00:27,160 --> 00:00:35,040 But what if we don't want to just hide and show elements, but we want to change their success properties? 6 00:00:35,290 --> 00:00:39,500 Well, to do this, we can just use the animate method. 7 00:00:39,820 --> 00:00:41,380 So this is how we write it. 8 00:00:41,530 --> 00:00:42,760 So here's the element. 9 00:00:42,970 --> 00:00:45,390 Then comes the animate method. 10 00:00:45,550 --> 00:00:49,730 And inside here, we are going to pass three arguments. 11 00:00:49,900 --> 00:00:55,690 So the first one is an object with the properties and values that we want to change. 12 00:00:56,050 --> 00:00:59,350 We don't need to change one property at a time. 13 00:00:59,500 --> 00:01:05,500 As this is an object, we can list as many properties and values we want. 14 00:01:05,890 --> 00:01:08,920 The second and third arguments are optional. 15 00:01:09,930 --> 00:01:16,410 So this one is the speed, we know that if we don't pass anything, it's just going to use the default 16 00:01:16,410 --> 00:01:18,720 speed of four hundred milliseconds. 17 00:01:19,110 --> 00:01:22,460 And the third argument is a callback function. 18 00:01:22,680 --> 00:01:31,440 So if we want to execute something after this method finishes, then we can pass a callback function. 19 00:01:31,680 --> 00:01:32,970 So let's see an example. 20 00:01:32,970 --> 00:01:35,040 Let's leave these two out for now. 21 00:01:35,040 --> 00:01:39,310 Let's see an example with just passing the properties. 22 00:01:39,510 --> 00:01:41,250 So here we have a button. 23 00:01:41,490 --> 00:01:47,570 And I want to enlarge the square every time I click this button. 24 00:01:47,610 --> 00:01:49,980 So let's see what's the idea of it? 25 00:01:51,090 --> 00:01:58,300 So the idea is animate and we also have this square which has the idea of square. 26 00:01:58,320 --> 00:02:00,390 So let's go to a visual studio code. 27 00:02:00,660 --> 00:02:03,270 So the first thing is setting the click event. 28 00:02:06,580 --> 00:02:08,260 To the animate button. 29 00:02:10,380 --> 00:02:11,640 So don't click. 30 00:02:19,280 --> 00:02:23,360 And now when we click the button, let's select that square. 31 00:02:28,630 --> 00:02:31,460 And let's apply the animate method. 32 00:02:32,200 --> 00:02:35,880 So, again, step by step, open and close parentheses. 33 00:02:36,010 --> 00:02:44,500 Now, inside here, one of the arguments that we can pass here is an object composed of properties and 34 00:02:44,500 --> 00:02:45,160 values. 35 00:02:45,490 --> 00:02:49,840 So let's start this object here, which is going to be the properties and values. 36 00:02:50,080 --> 00:02:53,120 Then the time is optional in this case. 37 00:02:53,140 --> 00:02:57,660 I'm just going to pass a time, let's say five hundred milliseconds. 38 00:02:58,120 --> 00:03:02,740 So now inside here, I want to enlarge that square. 39 00:03:02,920 --> 00:03:07,170 So I need to get it with and I need to increase it. 40 00:03:07,240 --> 00:03:12,730 So this means that first I need to get its current with to increment it. 41 00:03:12,880 --> 00:03:17,740 But with Jake, where this is actually very easy to do because we can write it like this. 42 00:03:17,770 --> 00:03:25,630 So with four to six properties, we don't need to use quotation marks here so we can just write it like 43 00:03:25,630 --> 00:03:25,910 this. 44 00:03:25,930 --> 00:03:32,170 So this is the property of this object and the value associated to it. 45 00:03:33,280 --> 00:03:40,270 It's just going to be what we want, so in this case, 20 pixels, but what we want here is incrementing 46 00:03:40,450 --> 00:03:43,750 this value so we can just do it like this. 47 00:03:43,930 --> 00:03:51,340 It is going to get its current width and just increment 20 pixels every time we click the button. 48 00:03:51,670 --> 00:03:53,880 So now let's do the same thing here. 49 00:03:54,130 --> 00:03:59,680 So copying all this and let's do the same thing for the height. 50 00:04:01,190 --> 00:04:02,120 Saving this. 51 00:04:05,060 --> 00:04:10,110 Refreshing the page, let's click the button and now this is not working. 52 00:04:10,130 --> 00:04:12,110 Let's see what is wrong here. 53 00:04:12,680 --> 00:04:18,050 Well, when I selected the square element, I just forgot the hashtag. 54 00:04:18,930 --> 00:04:21,960 So let's include it now, let's try again. 55 00:04:23,540 --> 00:04:31,010 So enlarge the square, as you can see, it is just increasing the width and the height of this element 56 00:04:31,010 --> 00:04:37,420 and I don't know if you noticed, but first it is doing the with animation and then the height. 57 00:04:37,700 --> 00:04:40,280 This is because when we use. 58 00:04:41,230 --> 00:04:48,670 The animate method like this in sequence, even though JavaScript is asynchronous, like I've mentioned, 59 00:04:48,970 --> 00:04:52,060 but with the animate method, this is an exception. 60 00:04:52,180 --> 00:04:59,770 Every time we use animate methods like this in sequence, the browser is going to wait for one animate 61 00:04:59,770 --> 00:05:02,320 method to finish to do the other. 62 00:05:02,380 --> 00:05:06,780 So if we increase this time, we are going to see this a bit better. 63 00:05:07,240 --> 00:05:10,030 So let's increase this time to one second. 64 00:05:12,090 --> 00:05:17,490 Let's try to increase it a bit more, let's say 50 pixels at each time. 65 00:05:20,260 --> 00:05:26,600 Let's try it again, so first the width, then the height, it's not doing at the same time. 66 00:05:26,620 --> 00:05:29,170 So first with then the height. 67 00:05:29,230 --> 00:05:33,000 All right, then what if we want to do both at the same time? 68 00:05:33,010 --> 00:05:35,230 Well, we can just go back there. 69 00:05:35,320 --> 00:05:40,480 Let's remember that this is an object, so we could just do it like this. 70 00:05:40,510 --> 00:05:43,330 So this is one element of this object. 71 00:05:43,330 --> 00:05:45,390 It's one property and value. 72 00:05:45,820 --> 00:05:47,320 So then we can just use. 73 00:05:48,330 --> 00:05:54,150 Comma, and then come with another property and value for this object. 74 00:05:54,180 --> 00:05:56,550 So now I can just comment this. 75 00:05:57,790 --> 00:05:59,440 And if we do this. 76 00:06:02,540 --> 00:06:09,380 It is just going to do both at the same time, so depending on what you want, you can do it like this, 77 00:06:09,740 --> 00:06:12,050 both inside the same. 78 00:06:12,960 --> 00:06:20,910 Method, so like this, it is just going to execute both at the same time or if you want to do the first 79 00:06:20,910 --> 00:06:28,950 part first and then the second you can use to animate methods, and then this one is just going to start 80 00:06:28,950 --> 00:06:30,840 when the first one finishes. 81 00:06:31,290 --> 00:06:34,890 So just two important things that I want to mention before we finish. 82 00:06:35,310 --> 00:06:40,650 Most excess properties can be animated except colors. 83 00:06:40,860 --> 00:06:48,060 OK, so if you try to do this by changing the color of an element, nothing is going to happen because 84 00:06:48,060 --> 00:06:51,560 colors cannot be used inside this method. 85 00:06:51,870 --> 00:06:58,290 And the second thing is that the case properties that don't follow the variable naming rules, they 86 00:06:58,290 --> 00:07:01,890 have to be written in the lower Kanakas style. 87 00:07:01,990 --> 00:07:08,230 So if you want to change, let's say, the padding left of an element, you can just do like this. 88 00:07:08,280 --> 00:07:09,450 So let's try it out. 89 00:07:09,480 --> 00:07:11,700 Now, I'm going to copy this. 90 00:07:11,820 --> 00:07:16,070 And inside here, I also want to increase the padding left. 91 00:07:16,500 --> 00:07:22,620 So since this is not following the variable naming rules, I'm just going to write it like this. 92 00:07:23,750 --> 00:07:26,480 Using the lower case style. 93 00:07:35,110 --> 00:07:41,110 OK, let's see if this is working, going to refresh the page clicking. 94 00:07:43,450 --> 00:07:50,020 And now we are not seeing it very well because I used Batwing, but as you can see, this is not a square 95 00:07:50,020 --> 00:07:52,300 anymore because it just added padding. 96 00:07:52,720 --> 00:07:55,790 So instead of doing this so we can see it better. 97 00:07:56,080 --> 00:07:59,080 I'm just going to use margin for our example. 98 00:07:59,300 --> 00:08:02,290 So then we are actually going to see the square moving. 99 00:08:03,700 --> 00:08:06,550 So I'm going to increase the margin left. 100 00:08:09,640 --> 00:08:15,880 So let's try now, as you can see, he's increasing the width and the height of the square and also 101 00:08:15,880 --> 00:08:18,730 adding some margin, which is really cool. 102 00:08:20,170 --> 00:08:24,920 If you spend some time here, you can do very cool things using the animate method. 103 00:08:25,300 --> 00:08:27,440 So that was all I wanted to say for now. 104 00:08:27,490 --> 00:08:28,840 I'll see you in the next video. 105 00:08:28,990 --> 00:08:29,430 Bye bye.