animation effects by changing CSS properties value 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})

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Animation by using JQUERY

What is the current position of the object

Repeating the animation by using callback function

Subscribe

1

2

3

4