Animation by using JQUERYUsing jquery we can create animations by changing various CSS properties of the object.
Let us start by moving one image by 10px
In the above code d1 is the ID of the image, we have moved this image by 100px from its current position.
left : "+=100px" > Move the image by 100px from left edge from its current position
top : "+=100px" > Move the image by 100px from top edge from its current position
Here we have used one CSS value the left position and changed it to get the animation. In addition to this animation method takes three more optional parameters. Here is the syntax with all options.
Styles (required ) :
CSS property which will be changed to create animation effect
Speed ( Optional ) :
Speed of transition. Can take three values
Easing ( Optional ) :
Specifies how the animation will progress.
callback ( Optional ) :
Callback function executes once the animation is over. This function we will be using to continue the animation repeatedly.
What is the current position of the objectWe can read the current position of the element by using position() method
Here is the code to get position of the image
We will modify above demo to display the current position of the image inside another div ( id=d2)
Repeating the animation by using callback functionSo far we have moved the image by clicking the button, now we will try to move it continuously with the help of callback function.
We will keep our code to animate inside a function ( name : start_move ) , this function we will call again from our animation function.
The above line is kept inside the function start_move() , so the animation continues again and again. To stop the movement we have kept one end limit of 400 px. Once the position reached more than 400 px, the position of the image is changed to 100px by using offset()