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

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.