jQuery Plugin To Animate In DOM Elements In Sequence - jAnim

File Size: 4.15 KB
Views Total: 1561
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Animate In DOM Elements In Sequence - jAnim

jAnim is a simple-to-use jQuery plugin used to animate in a set of DOM elements sequentially with fade or flip effects powered by CSS3 transitions and transforms. So that the elements will appear one after another to provide a "smoother" experience for your visitors.

Basic Usage:

1. Load the jQuery jAnim plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery-animation.js"></script>

2. Wrap your DOM elements into a container element.

<section class="demo">
  <img src='http://lorempixel.com/400/300/cats/1'>
  <img src='http://lorempixel.com/400/300/cats/2'>
  <img src='http://lorempixel.com/400/300/cats/3'>
  <img src='http://lorempixel.com/400/300/cats/4'>
  <img src='http://lorempixel.com/400/300/cats/5'>
  <img src='http://lorempixel.com/400/300/cats/6'>
  <img src='http://lorempixel.com/400/300/cats/7'>
  <img src='http://lorempixel.com/400/300/cats/8'>
  <img src='http://lorempixel.com/400/300/cats/9'>
  <img src='http://lorempixel.com/400/300/cats/10'>
</section>

3. Call the plugin on the container and specify the animation you want to use.

$('.demo').jAnim({

// or "flip"
"animation": "fading"

});

4. The required CSS styles for the fade in animation.

.jAnim-fading { opacity: 0; }

.jAnim-fading-show { opacity: 1; }

5. The required CSS/CSS3 styles for the flip animation.

.jAnim-flip-show {
  -moz-transform: translateY(0px) rotateX(0deg) !important;
  -webkit-transform: translateY(0px) rotateX(0deg) !important;
  -o-transform: translateY(0px) rotateX(0deg) !important;
  -ms-transform: translateY(0px) rotateX(0deg) !important;
  transform: translateY(0px) rotateX(0deg) !important;
  opacity: 1 !important;
}

6. All the default settings.

$('.demo').jAnim({

"interval": 150,
"speed": 300,
"animFunction": 'ease',
"animation": "fading",
"action": true, // True = fading , False = Disfading
"callback": null

});

This awesome jQuery plugin is developed by shug0. For more Advanced Usages, please check the demo page or visit the official website.