JQueryAnimate

On this page:

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:

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:

Parameter Description Default
data-effect="..." either an effect name as listed below, or the name of an effect group to chose a random effect from, or the string random for a random effect among all known ones, or a comma separated list of effects  
data-infinite="true/false switch on/off an infinite effect loop false

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:

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

Group Effects
attentionSeekers bounce, flash, headShake, jello, pulse, rubberBand, shake, swing, tada, wobble
bouncingEntrances bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp
bouncingExits bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
fadingEntrances fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig
fadingExits fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig
flippers flip, flipInX, flipInY, flipOutX, flipOutY
lightspeed lightSpeedIn, lightSpeedOut
rotatingEntrances rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
rotatingExits rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
slidingEntrances slideInDown, slideInLeft, slideInRight, slideInUp
slidingExits slideOutDown, slideOutLeft, slideOutRight, slideOutUp
specials hinge, jackInTheBox, rollIn, rollOut
zoomingEntrances zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp
zoomingExits zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp