Animate.css jQuery Plugin
/* Use this additional style to hide element at start */
.animate
{
visibility : hidden;
}
.animated
{
visibility : visible;
}
<div id="playground">
<h1 id="title-1" class="animate" data-animate-effect="bounceIn">
Hello World
</h1>
<h2 id="title-1" class="animate" data-animate-effect="bounceInLeft" data-animate-by="title-1">
Start After title
</h2>
</div>
/**
* jQuery Plugin for Animate.css - http://daneden.me/animate
*
* @author =undo= <info@wpxtre.me>
* @copyright Copyright (C) 2012-2014 wpXtreme Inc. All Rights Reserved.
* @date 2014-01-24
* @version 1.0.0
*
* Gist https://gist.github.com/gfazioli/8599718
*
*/
;(function ( $, window, document, undefined )
{
"use strict";
$.fn.wpxAnimate = function ()
{
return this.each( function ()
{
var container = $( this );
container
.find( '.animate' )
.not( '.animated' )
.not( '[data-animate-by]' )
.each(
function ( i, e )
{
var current = $( e );
current
.addClass( 'animated ' + current.data( 'animate-effect' ) )
.one( 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', _applyEffectBy );
}
);
function _applyEffectBy()
{
var current = $( this ), id = current.attr( 'id' );
if ( id ) {
container
.find( '[data-animate-by="' + id + '"]' )
.not( '.animated' ).each( function ()
{
$( this )
.addClass( 'animated ' + $( this ).data( 'animate-effect' ) )
.one( 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', _applyEffectBy );
} );
}
}
} );
};
})( jQuery, window, document );
$( '#playground' ).wpxAnimate();