Hi, everybody, in this video, we're going to talk about the animated method in the previous video,
we saw some cool effects that we can do with Jake Wari.
So we learn how to hide and show elements and we learn how to do this using a Faid effect or a sliding
effect.
But what if we don't want to just hide and show elements, but we want to change their success properties?
Well, to do this, we can just use the animate method.
So this is how we write it.
So here's the element.
Then comes the animate method.
And inside here, we are going to pass three arguments.
So the first one is an object with the properties and values that we want to change.
We don't need to change one property at a time.
As this is an object, we can list as many properties and values we want.
The second and third arguments are optional.
So this one is the speed, we know that if we don't pass anything, it's just going to use the default
speed of four hundred milliseconds.
And the third argument is a callback function.
So if we want to execute something after this method finishes, then we can pass a callback function.
So let's see an example.
Let's leave these two out for now.
Let's see an example with just passing the properties.
So here we have a button.
And I want to enlarge the square every time I click this button.
So let's see what's the idea of it?
So the idea is animate and we also have this square which has the idea of square.
So let's go to a visual studio code.
So the first thing is setting the click event.
To the animate button.
So don't click.
And now when we click the button, let's select that square.
And let's apply the animate method.
So, again, step by step, open and close parentheses.
Now, inside here, one of the arguments that we can pass here is an object composed of properties and
values.
So let's start this object here, which is going to be the properties and values.
Then the time is optional in this case.
I'm just going to pass a time, let's say five hundred milliseconds.
So now inside here, I want to enlarge that square.
So I need to get it with and I need to increase it.
So this means that first I need to get its current with to increment it.
But with Jake, where this is actually very easy to do because we can write it like this.
So with four to six properties, we don't need to use quotation marks here so we can just write it like
this.
So this is the property of this object and the value associated to it.
It's just going to be what we want, so in this case, 20 pixels, but what we want here is incrementing
this value so we can just do it like this.
It is going to get its current width and just increment 20 pixels every time we click the button.
So now let's do the same thing here.
So copying all this and let's do the same thing for the height.
Saving this.
Refreshing the page, let's click the button and now this is not working.
Let's see what is wrong here.
Well, when I selected the square element, I just forgot the hashtag.
So let's include it now, let's try again.
So enlarge the square, as you can see, it is just increasing the width and the height of this element
and I don't know if you noticed, but first it is doing the with animation and then the height.
This is because when we use.
The animate method like this in sequence, even though JavaScript is asynchronous, like I've mentioned,
but with the animate method, this is an exception.
Every time we use animate methods like this in sequence, the browser is going to wait for one animate
method to finish to do the other.
So if we increase this time, we are going to see this a bit better.
So let's increase this time to one second.
Let's try to increase it a bit more, let's say 50 pixels at each time.
Let's try it again, so first the width, then the height, it's not doing at the same time.
So first with then the height.
All right, then what if we want to do both at the same time?
Well, we can just go back there.
Let's remember that this is an object, so we could just do it like this.
So this is one element of this object.
It's one property and value.
So then we can just use.
Comma, and then come with another property and value for this object.
So now I can just comment this.
And if we do this.
It is just going to do both at the same time, so depending on what you want, you can do it like this,
both inside the same.
Method, so like this, it is just going to execute both at the same time or if you want to do the first
part first and then the second you can use to animate methods, and then this one is just going to start
when the first one finishes.
So just two important things that I want to mention before we finish.
Most excess properties can be animated except colors.
OK, so if you try to do this by changing the color of an element, nothing is going to happen because
colors cannot be used inside this method.
And the second thing is that the case properties that don't follow the variable naming rules, they
have to be written in the lower Kanakas style.
So if you want to change, let's say, the padding left of an element, you can just do like this.
So let's try it out.
Now, I'm going to copy this.
And inside here, I also want to increase the padding left.
So since this is not following the variable naming rules, I'm just going to write it like this.
Using the lower case style.
OK, let's see if this is working, going to refresh the page clicking.
And now we are not seeing it very well because I used Batwing, but as you can see, this is not a square
anymore because it just added padding.
So instead of doing this so we can see it better.
I'm just going to use margin for our example.
So then we are actually going to see the square moving.
So I'm going to increase the margin left.
So let's try now, as you can see, he's increasing the width and the height of the square and also
adding some margin, which is really cool.
If you spend some time here, you can do very cool things using the animate method.
So that was all I wanted to say for now.
I'll see you in the next video.
Bye bye.