|
Location Animation
Location animation is nothing but animating location / poisition of an element. A position is represented by x and y parameters.
Location animation uses Utility function "pos()" for changing the position of an element.
To force animation api to use "posAbs()", set absoute parameter as true.
{
to : { x : 200},
anim : "Location.smooth",
duration : 2000,
absolute : true
}
Example 1 - Simple location animation in one direction
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
//animate element to x 400
$.get("#box1").animate({
to : { x : 400 },
anim : "Location.smooth.return",
repeat : 3,
duration : 5000
});
//animate element to y 200
$.get("#box2").animate({
to : { y : 200 },
anim : "Location.smooth.return",
repeat : 5,
duration : 2000
});
});
});
Result
Example 2 - Animate a single element both horizontally and vertically
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// animate both horizontally and vertically
$.get("#box1").animate({
to : { x : 200, y : 200 },
anim : "Location.smooth",
duration : 1000
});
});
});
Result
Example 3 - Animate 100 pixels from current position
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// Animate x to 100 + current
$.get("#ani").on("click", function() {
$.get("#box1").animate({
to : { x : "+100" },
anim : "Location.smooth",
duration : 1000
});
});
});
});
Result
| |
|
|