jQuery Plugin To Fade In Elements Sequentially - fadeQueue

jQuery Plugin To Fade In Elements Sequentially - fadeQueue
File Size: 7.58 KB
Views Total: 1586
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

fadeQueue is a super light jQuery plugin that enables you to fade through any kind of element in sequence, at a specified fade-in speed.

How to use it:

1. Load the jQuery fadeQueue plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="jquery.fadequeue.min.js"></script> 

2. Create a group of elements that will fade in one by after.

<div id="content"> 
  <p>Content One</p> 
  <p>Content Two</p> 
  <p>Content Three</p> 
  ...
</div>

3. Initialize the plugin and done.

$('#content').fadeQueue();

4. Customization options.

$('#content').fadeQueue({

  // the duration (miliseconds) for the queued item to fade in
  duration: 200,

  // a pause (miliseconds) between the fade in durations
  pause: 0,

  // a node where the animation will force a start
  startAt: parent.children(':first');
  
});

5. A callback function that will be called when queue is empty..

$('#content').fadeQueue(function(){
  alert('Queue is empty')
});

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