A micro-plugin for using Animate.css with jQuery.
Switch branches/tags
Clone or download
Latest commit 81bb11a Oct 26, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Initial commit Feb 22, 2017
.eslintrc Add AMD env Oct 26, 2017
.gitignore Ignore local test file Feb 23, 2017
LICENSE.md Added license Feb 22, 2017
gulpfile.js Initial commit Feb 22, 2017
jquery.animateCSS.js Add AMD env Oct 26, 2017
jquery.animateCSS.min.js Add support for AMD/CommonJS Oct 26, 2017
package.json Version bump Oct 26, 2017
readme.md Add support for AMD/CommonJS Oct 26, 2017

readme.md

jquery.animateCSS.js - A micro-plugin for using Animate.css with jQuery.

Developed by Cory LaViska for A Beautiful Site, LLC

Licensed under the MIT license: http://opensource.org/licenses/MIT

Overview:

Animate.CSS is amazing, but it's a bit limited out-of-the-box. This plugin makes it easier to use with jQuery.

Features:

  • Apply any Animate.css effect.
  • Custom durations without adding CSS.
  • Optional delay before animation.
  • Callback for when animations complete.
  • Compact! (About 110 lines)

Installing

Include the minified version of this plugin in your project or install via NPM:

npm install --save @claviska/jquery-animate-css

This plugin can also be loaded as a module.

Using the plugin

The plugin accepts multiple argument signatures. Examples:

// Animation only
$(el).animateCSS('bounce');

// Animation with duration
$(el).animateCSS('bounce', 1000);

// Animation with duration and callback
$(el).animateCSS('bounce', 1000, function() {
  // Animation complete!
});

// Animation with callback
$(el).animateCSS('bounce', function() {
  // Animation complete!
});

// Animation with all options
$(el).animateCSS('fadeOut', {
  delay: 1000,
  duration: 300,
  complete: function() {
    $(this).remove();
  }
});

Animation

The first argument is always the animation you want to use. You can find an up-to-date list in the Animate.css readme file.

If an animation isn't working, make sure you're using the latest version of Animate.css and that your selector is correct.

Options

When an object is passed as the second argument, it may contain the following properties:

  • delay: how long to wait (in milliseconds) before applying the animation (default 0).
  • duration: the animation duration (default 1000).
  • complete: a callback to run after the animation is complete. Called in the context of the target element.