Click here to view code image
// Animate with a duration of 1000ms (and implicitly use the default easing
value of “swing”)
$element.velocity({ top: 50 }, 1000);
// Animate with a duration of 1000ms and an easing of “ease-in-out”
$element.velocity({ top: 50 }, 1000, “ease-in-out”);
// Animate with an easing of “ease-out” (and implicitly use the default
duration value of 400ms)
$element.velocity({ top: 50 }, “ease-out”);
// Animate with a duration of 1000ms and a callback function to be triggered
upon animation completion
$element.velocity({ top: 50 }, 1000, function() { alert(“Complete.”) });
This shorthand syntax is a quick way of passing in animation options when you only
need to specify the basic options (duration, easing, and complete). If you pass in an
animation option other than these three, you must switch all options to the object syntax.
Hence, if you want to specify a delay option, change the following syntax:
Click here to view code image
$element.velocity({ top: 50 }, 1000, “ease-in-out”);
to this syntax:
Click here to view code image
// Re-specify the animation options used above, but include a delay value of
500ms
$element.velocity({ top: 50 }, { duration: 1000, easing: “ease-in-out”,
delay: 500 });
You can’t do this:
Click here to view code image
// Incorrect: Divides animation options between the comma-separated syntax
and the object syntax
$element.velocity({ top: 50 }, 1000, { easing: “ease-in-out”, delay: 500 });
Properties
There are two differences between CSS-based and JavaScript-based property animation.
First, unlike in CSS, Velocity accepts only a single numeric value per CSS property. So,
you can pass in:
Click here to view code image
$element.velocity({ padding: 10 });
or
Click here to view code image
$element.velocity({ paddingLeft: 10, paddingRight: 10 });
But you can’t pass in:
Click here to view code image
// Incorrect: The CSS property is being passed more than one numeric value.
$element.velocity({ padding: “10 10 10 10” });
If you do want to animate all four padding values (top, right, bottom, and left),