Hello, in this jQuery video, I am going to show you the animate method. So the animate method, essentially and create custom animations based on CSS property, so any CSS property can be essentially native. So the first thing we are going to do is create a div. So have an ID. So this is how we will select channel colas. Epic corny, actually, I'll call this Darth Vader, Darth Vader.

And I'm going to end here put like so. And we are also going to have a button that will when clicked, it will do the animation but it's gonna have custom animation. Let me show you the format of it. So you can create your own one wish and I'm going to say Anyway, but anyway, so for copy this and I'll do dollar do Ha. So animate button awareness clicked. Function callback.

Now in here, we are going to select the element which was Darth Vader. And to do to do animations with dynamite, you put brackets. Next you put curly braces, you can provide multiple artists provide the one for them, then I'll add some more, let's say so you just put the CSS property name, then CSS values. So in this case is gonna be pixel amount needs to be a string. Say 500 pixels and see what we get or click it. Okay.

That didn't work. So let's see what's happened. We got this good. I'm going to empty cache and load just in case something that no it isn't. So make sure the element ID on the screen is very there. Make sure you've got the correct ID we have an automation sure we got the correct this.

Okay, so when anything clicked, we are saying Darth Vader dot animate left. believe we need to have single quotation marks. Okay, now It tried to do something and technically that will did it try try it in the end apply the style pink is because of the display block. So if I were to just say display yeah is because of the you know the type that it is. So let's say for instead of that, instead of that opera stands for spies that reload, click this why I said position issue sorry No display should absolutely work fine. Okay, so what I'm going to do is provide some styling and some inline styling.

Generally, you wouldn't go for this case, we can, you know, get we can excuse yourself, we can be in the position. And if you do produce an absolute you would have worked with the deal with Well, what do I do just to go back and we're going to need something. Otherwise it's overlapping, absolute condition at the moment. Knife I have no okay, click that. It animates 500 pixels across, you can provide a speed value as well for the animation, and I have a separate video covering all of that software. So feel free to check that out.

And I've also got a separate video covering how to have a callback. So once the animation is fully finished, you can call it a piece of code or function. Well you can also do is, you know, play more properties at the same time you'll be animating. So if I were to also chain let's say the two wells could change capacity, you could change capacity for chamber pacity. We current to this, we can do a shooting 0.5 if I reload it, and you can see it faded out to make it more clear 20 to 25%. And I'm actually gonna do 100 pixels left so it doesn't move as much.

You can see he was fading in this experiment in 200 pixels. That look pretty cool. So I faded 25% from what Every current positives could be more or greater. Tomorrow, it moves left relative as well by 200 pixels as well. I love that any CSS property can be animated. You can also do some cool stuff with some mathematics as well, where you could have something along the lines of let's apply some, you know, why do Star Trek don't wanna play some more style to it.

And here, I'm gonna say, Ash, da, da dah. So I'm going to grab this position elemental, put that all put that in there. Now, I'm going to say do all ads. No padding, background color. See red reload. I didn't see Don't move them.

The other thing that we can do so far common at this line, so we don't want that we don't want to change your path, because the more we see what we're doing, really, you could change the padding inside of it. So we could do something like 10 pixels. And there we go. And then if we load it, as you can see, we've added some padding, you could go step further back and change the height of the width as well. So we could say height, and we could send could we say for the height, because to 100. So if I reload it now, so it's got the padding and the height as well.

So I think this is pretty darn cool. Another thing you can do is some math, so say plus equals, so we add 100 pixels each time to the height for reloaded. Okay? click it again, the height will keep increasing because you know, it's already applied to and your pixels are there. It's already applied padding of 10 pixels. If you want to do some math, this could be applied to the pattern to the left to the mirror, you can do lots of for click, keep clicking it will keep adding up, do my thing cause you know your take it way.

So that's it. That's how you do animations. Really, really awesome stuff. If you have any questions, feel free to pop me a message and looks at all our separate videos covering how to add speed and how to use a function callback with effects as well. As usual, I look forward to seeing you in the next awesome video.