JQueryAnimate

Summary

Homepage: http://daneden.me/animate
Author(s): Daniel Eden
Version: 3.7.0

A cross-browser library of CSS animations.

Usage

To start using animate.css you need to load it into the page using %JQREQUIRE{"animate"}%. There are two ways to make use of this library.

Direct use of animate.css

The only thing required to animate a DOM node is to add css classes to it:

• Add the class animated to the element you want to animate
• Add the class infinite in case that you also want it to be aninated in an infinite loop
• Add the class of the animation as listed below

Use via jqAnimateCSS

This is a small convenience wrapper that adds a bit more control over the kind of animation, i.e. in addition to the direct name of the effect you may also choose a random effect or one of a group of effects:

• Add the class jqAnimateCSS to the element to animate
• Add HTML5 data parameters

Whenever sending the element a refresh signal will the effect be repeated, or another one will be chosen among the set of effects configured.

You type:

<h3 id="myElem" class="jqAnimateCSS foswikiCenter" data-effect="attentionSeekers">Hello World</h3>

%BUTTON{"Refresh" onclick="jQuery('#myElem').trigger('refresh')"}%

You get:

Hello World

Refresh

Javascript API

A jqAnimateCSS element will be initialized by an animateCSS javascript object which takes over control of the animation as well as offers a few methods that come in handy when dealing with animations. You may access the animateCSS instance of a jqAnimateCSS element using jQuery.data() method:

jQuery(function($) {
   var elemCtrl = $("#myElem").data("animateCSS");

   elemCtrl.animate().then(function() {
      console.log("animation finished");
   });

   $("#myElem").on("start", function() {
      console.log("the animation started");
   });

   $("#myElem").on("stop", function() {
      console.log("the animation ended");
   });
});

The .animate() method may be used to start the animation. It returns a promise that will be resolved once the animation finished.

Events

The element controller fires two events:

• start: fired right before the animation starts
• stop: triggered once the animation finished

The stop event is provided in addition to the different browser events fired when a css animation stopped.

So listening on an animateCSS element via $("#myElem").on("finish", function() {...}) is equivalent to the much more complicated standard way

$("#myElem").on("animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd mozAnimationEnd oanimationend", function() {
   ...
});

to cover all browsers.

Effects