Animation by using JQUERY

Using jquery we can create animations by changing various CSS properties of the object.

Let us start by moving one image by 10px

$('#b1').click(function(){
 $("#d1").animate({left: "+=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.
(selector).animate({styles},speed,easing,callback)
Styles (required ) :
CSS property which will be changed to create animation effect
Speed ( Optional ) :
Speed of transition. Can take three values
  • 'slow'
  • 'fast'
  • Milli seconds
Easing ( Optional ) :
Specifies how the animation will progress.
  • 'swing' Progress is more at starting and ending
  • 'linear' Constant Progress from starting to ending
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 object

We can read the current position of the element by using position() method

Here is the code to get position of the image
var x=$("#d1").position();
We will modify above demo to display the current position of the image inside another div ( id=d2)
$('#d2').html(x.left);

Repeating the animation by using callback function

So 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.
$("#d1").animate({left: "+=10px"},'fast',start_move);
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()
$("#d1").offset({  left: 100})
Visitors Rating
Your Rating




Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer