Holla Tech - Learn

animate()
 

The animate() method lets you animate to a set value, or to a value relative to the current value.
You need to define the CSS properties to be animated as its parameter in JSON format (“key”:”value” pairs).
The second parameter defines the speed of the animation.
For example, the following code animates the width property of the div in 1 second to the value 250px: 

$(“div”).click(function() {
  $(“div”).animate({width: ‘250px’}, 1000);
}); 

 

Note the JSON format for providing the CSS parameters. The JSON syntax was also used in the previous modules when manipulating CSS properties.

NOTE!
You can animate any CSS property using the above mentioned syntax, but there is one important thing to remember: all property names must be camel-cased when used with the animate() method (camelCase is the practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter with the first word in lowercase). You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

animate()
 

Multiple properties can be animated at the same time by separating them with commas.
For example:

$(“div”).animate({
  width: ‘250px’,
  height: ‘250px’
}, 1000); 

 

It is also possible to define relative values (the value is then relative to the element’s current value). This is done by putting += or -= in front of the value:

$(“div”).animate({
  width: ‘+=250px’,
  height: ‘+=250px’
}, 1000); 

 

NOTE!
To stop an animation before it is finished, jQuery provides the stop() method.

Animation Queue
 

By default, jQuery comes with queue functionality for animations.
This means that if you write multiple animate() calls one after another, jQuery creates an “internal” queue for these method calls. Then it runs the animate calls one-by-one.
For example:

var div = $(“div”);
div.animate({opacity: 1});
div.animate({height: ‘+=100px’, width: ‘+=100px’, top: ‘+=100px’}, 500);
div.animate({height: ‘-=100px’, width: ‘-=100px’, left: ‘+=100px’}, 500);
div.animate({height: ‘+=100px’, width: ‘+=100px’, top: ‘-=100px’}, 500);
div.animate({height: ‘-=100px’, width: ‘-=100px’, left: ‘-=100px’}, 500);
div.animate({opacity: 0.5}); 

 

Each animate() method call will run one after another.
Remember, to manipulate the position of elements, you need to set the CSS position property of the element to relative, fixed, or absolute.

NOTE!
The animate() method, just like the hide/show/fade/slide methods, can take an optional callback function as its parameter, which is executed after the current effect is finished.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE jQUERY MAIN COURSE PAGE. 

jQUERY MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT