Animate.css jQuery Plugin

animate-add.css

/* Use this additional style to hide element at start */
.animate 
{
  visibility : hidden;
}

.animated
{
  visibility : visible;
}

animate-sample.html

<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>

animate.js

/**
 * jQuery Plugin for Animate.css - http://daneden.me/animate
 *
 * @author          =undo= <[email protected]>
 * @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 );

demo.js

$( '#playground' ).wpxAnimate();