Begin and Complete
The begin and complete options allow you to specify functions to be triggered at
certain points in an animation: Pass the begin option a function to be called prior to the
start of an animation. Conversely, pass the complete option a function to be called at
the completion of an animation.
With both options, the function is called once per animation call, even if multiple
elements are being animated at once:
Click here to view code image
var $divs = $(“div”);
$divs.velocity(
{ opacity: 0 },
// Open an alert box right before the animation begins
{
begin: function () { console.log(“Begin!”); },
// Open an alert box once the animation completes
complete: function () { console.log(“Complete!”); }
}
);
Callback Functions
These options are commonly referred to as “callback functions” (or “callbacks”)
since they are “called” when certain events occur in the future. Callbacks are useful
for firing events that are dependent on the visibility of elements. For example, if an
element starts at invisible then animates toward an opacity of 1, it may be
appropriate to subsequently trigger a UI event that modifies the new content once
users are able to see it.
Remember that you don’t need to use callbacks to queue animations onto one
another; animations automatically fire sequentially when more than one is assigned
to a single element or set of elements. Callbacks are for the queuing of non-
animation logic.Loop
Set the loop option to an integer to specify the number of times an animation should
alternate between the values in the call’s property map and the element’s values prior to
the call:
Click here to view code image
$element.velocity({ height: “10em” }, { loop: 2 });
If the element’s original height was 5em, its height would alternate between 5em and
10em twice.
If the begin or complete options are used with a looped call, they are triggered once
each—at the very beginning and end of the total loop sequence, respectively; they are not
retriggered for each loop alternation.
Instead of passing in an integer, you can also pass in true to trigger infinite looping: