|
Dimension Animation
Dimension animation is nothing but animating Dimension / Size of an element. Size is represented by "wid" and "ht" parameters.
Dimension animation uses Utility function "dim()" for changing the dimension of an element.
{
to : { wid : 200},
anim : "Dimension.smooth",
duration : 2000
}
Example 1 - Simple Dimension animation in one direction
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
//animate element's width to 400
$.get("#box1").animate({
to : { wid : 400 },
anim : "Dimension.smooth.return",
repeat : 3,
duration : 5000
});
//animate element's height to 200
$.get("#box2").animate({
to : { ht : 200 },
anim : "Dimension.smooth.return",
repeat : 5,
duration : 2000
});
});
});
Result
Example 2 - Animate width and height simultaneously
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// animate both width and height
$.get("#box1").animate({
to : { wid : 200, ht : 200 },
anim : "Dimension.smooth",
duration : 1000
});
});
});
Result
Example 3 - Increase width by 100 px by animation
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// Animate width and increase by 100px
$.get("#ani").on("click", function() {
$.get("#box1").animate({
to : { wid : "+100" },
anim : "Dimension.smooth",
duration : 1000
});
});
});
});
Result
| |
|
|