jQuery Animation using animate() Method

Hello guys welcome to our jQuery series, in our last segment in which we have seen how to add jQuery sliding effects. Sliding in downward direction, sliding in upward direction and now both together in slide toggle all these three have been covered and the methods as well. At the same time where it is used like the bootstrap’s Accordion where there is a real time example of sliding, we have seen that as well.

So I hope all the practicals that we did in the last segment that you have practiced at least once.

Today’s segment is the last in jQuery Module effects that is jQuery other effects. In other effects basically, we will cover two effects. First is animation and the second is delay.

First of all we will look into animation, see here a method named animate is given here. Before we dive into animation, if you have done CSS from our LearnVern, then in CSS we have learned animation and with the help of CSS animation, we have made a program like this, I will reload this program. The time I will reload this program, this red color square that will move in the right hand side means in this direction. I have pressed five and it is moving and with it the color is changing from red to yellow. I will do it once again, this complete example has been done through animation. This is the code file.

This is the code file, this has a simple webkit animation and these two properties are added and in animation if you remember we have to add a keyframe which is initial that is from zero percent to hundred percent, if it ends how should it look that two states\property is passed.

So in the key frame both the states are passed and the name of the animation that needs to be performed is ‘myfirst’ so this is done completely with the help of CSS. So the meaning of this example is that we have already seen how we do animation with the help of CSS.

 So we can also do animation with the help of CSS using this animation property and key frame role but this same I want to do with the help of jQuery then how can we do that? So we will look at that in today’s segment.

That jQuery animate method helps us in running any animation in our program. Like it is written here, “The jQuery animate method provides you a way to create custom animations” means with the help of animate method we can create custom animations.

(03/21)

Please take a look at its syntax carefully, inside the syntax that is factory function dollar selector dot animate and inside the parentheses of animate Param is written there. What are these params, these are parameters likewise this is written here “parameter defines the CSS properties to be animated”. Means whatever the property of CSS we want to change it through animation. We will pass those inside the parameters. For example the previous example that we took in that you can see, my square is moving from the left corner to the middle corner plus the color is also changing. Means there are two things changing, one is background color and next is the position means from the left we are increasing distance. There are two things: changing position and changing background color.

So where will we write these two things if we are doing through jQuery then it will be inside the parameters that are inside the parameters. Means all the CSS properties that we want to change during the animation we will pass those in parameters.

What does speed indicate? That is how fast my animation will end. “The speed parameter is optional and specifies the duration of the effect. It can be seen as slow, fast or milliseconds”. It can be either of the three.

Callback after the end of animation if we want to execute a function then it will be a callback function. So this is the animate method and the theory is completed.

We will look at multiple examples in the animate, the first example is “Move a rectangle to the right side using animate”. Means we will make a rectangle and then we will move it to the right hand side with the help of animate method. Then what do we do for that?

So first of all I will open the sublime text and set it to HTML…. Animate,… here we will add our library… and this is our script, ….save the program as animate okay.

So our program is saved and now what is our task? Our task is “Move a rectangle to the right side using animate” which means I have to move the rectangle on the right side. So first, I will need a rectangle, so let’s say what can I do here? By clicking a button I can start animation or else default, when the page will load and the animation will start but the better option is on clicking the button.

For that, what I have to do is, let’s say H one…, animate…, button…, ID…, animate… okay and keep a button named ‘Start’ in which my animation will run okay. We will add style, (8 seconds pause,typing) text-align.. center, save. We will run the program along with it so that we can check…

So this is the program, here the start button, ‘Animate’ is the header. When I make a rectangle and I click on start then the rectangle will move in the right hand direction. Okay, so initially I have to make a rectangle and will take a div here…, I will give an ID to it ‘rect’. ..

(07/44)

Now we will generate it with style, hashtag ID, I need background color …cyan, width hundred pixel,…height hundred pixel, if you remember then in CSS we saw that whenever we want to perform animation then position is very important because the position is changing. So if I don’t give the position then animation won’t be performed. So if I give the position ‘absolute’ then the content will move.

So all four things are ready, save. Here is the rectangle we can see that now nothing will happen on start. Let’s say now I want to move it in the right hand direction, it means to move some distance from left. So when I click on this animate button then transition should be performed.

So in the script I will write, document dot …ready function… and now when I click on animate button so dollar …inside the course is my ID hashtag animate dot click… function, function is the animate. So if I want to animate this which is a division whose ID is rectangle. So dollar… hashtag… rect dot, now in animate if you remember then we inside the curly braces passed the parameters. So inside this I have opened it and pressed enter now I will give, left, I need left is let’s say four fifty or I will take five hundred pixels, that’s it. So in animation I want to perform that the rectangle moves in the right hand side in some amount and the amount is five hundred.

Now look at the way I have written this first left then colon and then I have passed the course. Clear? Now I will save this, start. Now you can see that it moved fast in this way. Let’s say I will take it as a hundred pixels, okay? Now I will start again and see that it is not performing. Means once my animation is performed then this is not executing again, this is a one time execution. So it has not started because it has moved one time. Now in place of hundred I keep it four hundred then reload it then, now it has moved from one place to another.

Now if we move into the program then you can see that I have moved the rectangle in the right hand side direction. Now if I want to give it some time it means it should move slower, after comma which is my time as of now I have given one second, start. You can see that in one second my rectangle is from there to here. Now this is my animation where it is starting from there and ending here. So my animation is performed, currently with the help of what I have done this animation?

CSS, as usual in its place but this animation is performed with the help of jQuery and whatever the changes we want in animation, we have changed inside the animate method means we have passed CSS properties in animate.

(12/11)

So we have two ways we can do with the help of keyframe, animation through keyframe and through jQuery. In both the functions we are getting the same output but the techniques to implement is different. In one place we are using CSS while in the other we are using jQuery. There is no difference in output but the difference is the technology you are using. The way you are using it, either its CSS or its jQuery. So this is the jQuery animate method.

Now let’s move forward in the slide “animate with multiple CSS properties”. Means now the task is that we will perform the same transition, in which the square has moved but you have seen that I have used only one property that is left and gave the distance. Now the task is “animate with multiple CSS properties” . Now an example is here where more than one CSS property is used. Now what will happen is the rectangle will move, its color will also change and it will also get bigger when it moves.

So how can we do that? I will copy the same program here, let’s say animate… two, here animate… one. Here two is written, this portion will be as it is nothing will be changed, and we have to change here.

I have to make my rectangle bigger, add some opacity and change the color. So let’s say initially I will keep the color… red and along with moving to the left something should change such as opacity as point five.., comma height… will be, our height was hundred hundred, it will be one fifty pixel…, width will be one fifty pixel…. Save the program as ‘animate underscore two’, run the program. So this is the program, when I click on start watch carefully there will be changes to the program.

My rectangle got bigger; it changed its opacity and also covered some distance. Now I will reload and start, okay. If I start it again it doesn’t perform anything so every time I have to reload, start animation. So now my rectangle is moving, width increasing, height increasing and opacity is also changing. 

So this is the example that we are using the same animation method but more properties are added. How to add more than one property in one animation, so this is animation.

 Now animation’s  third example, animate with relative values means you can see that we have taken two examples. In the first example we saw that it is changing position but if I click on start again nothing happens. Here also the same thing happens. Means if I want my animation to continue means whenever I click on start button the operation must go on and shouldn’t stop then what can we do for that.

So let’s say a program is given here, “animate with relative values” look at the code here whatever the height is, plus equal to means add one fifty in the current height. So it will run one time, then again, then again means each and every time one fifty will be added. This is our current program.

So let’s say, I will copy the first program and paste here, three…, width hundred hundred will be fine, we will change left to hundred pixel…, height will be plus equal to fifty PX,… same will be the width.  If I save this program… as animate underscore three.

(16/59)

Now look at this, I will start my height increased, color will be the same, no changes in color, little increase in height. I start again. My rectangle is increasing, so every time my rectangle is getting bigger by little, little, little and so on. So you can see here, ultimately it will increase that it will exceed my screen. So let’s make it twenty, keep it as twenty-twenty.

This is my small rectangle, start. Movement is there, getting bigger. But there is no movement, now what is happening? Now after moving from the left it is getting bigger. So if we want to add this then we can do some trial like, plus equal to fifty pixels. Start, start, start. So every time distance is increasing from left and width and height is also increasing, okay? You can see that every time I am clicking on start fifty pixels are increasing in height and width and movement is also there.

So this here is the animate in which the distance is also increasing, in our term we are increasing height and width but actually what is happening? “Animate with relative values”, whatever our values are we are gradually adding values to it and so on. So here is an example of animation.

So in total we looked at three types of animation, first - simple movement animation, second - color change height width change, third - everything change means in every click something is changing like this, first one…, here second one… in which we have added more than one properties and here third one in which something is changing in every click. So this is our animation. How to perform animation in the Jquery.            

 If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

So guys we will meet in the next segment in which we will continue the same topic. Some methods are pending in this topic. We will continue that.

Let’s meet in the next topic.