jQuery Animation
jQuery animate()

By jQuery animate() method we create Animation.

Syntax:

$(selector).animate({params},speed,callback);

params is required parameter that is css properties like left,right etc.

speed is optional parameter, we use slow,fast,milliseconds(1000 means 1seconds)

callback is optional parameter, this will execute for animation finish.

Change opacity

$("a").click(function(){
$("div").animate({opacity: '0.4'});
});

when we click on anchor tag then div background color change dark color to light color because we less opacity.

Change Height and Width

$("button").click(function(){
$("div").animate({height: '100px'});
$("div").animate({width: '100px'});
});

In this code when we click on button then div height change to
100px and width change to 100px

Change position

$("button").click(function(){
$("div").animate({top: '500px'});
$("div").animate({left: '200px'});
});

In this code when we click on button then div take
500px margin from top means move to down and take 200px margin from left means move in right direction

Increase height and width and also change opacity

$("button").click(function(){
$("div").animate({height: '+=100px',width: '+=100px'});
$("div").animate({opacity: '0.4'});
});

In this code we increase height and width to 100px and also change opacity.

Stop Animation

$("#head").click(function(){
$("#mydiv").stop();
});

where head is id for button when we click on button the animation stop


Previous