Home

Awesome

jquery.step

jQuery.step enables you to step or stagger through an array of jQuery DOM Elements. It is essentially like jQuery's native $().each() function, but with the added option to define the timeout or delay between each iteration.

Examples

Let's say you had a bunch of lis, like these:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

and you wanted to apply a transition to each item, one after the other. Then using jQuery.step you could use code very similar to the following:

$('li').step(function () {
  $(this).addClass('stepped');
}, 500);

This would consecutively add the stepped class to each li in the list with a 500ms delay between each addition. You can then style the transition states for both the unstepped and stepped lis in your stylesheet.

A full implementation of the step function could look like the following:

function doEveryStep(index, elements, delay) {
	// ... do something with $(this)
	// on every step
}

function calculateTimeout(index, elements) {
  // ... optional, you can also pass in
  // exact milliseconds instead

	var timeout = 0;
	
  return timeout; // must return number
}

function done(index, elements) {
	// ... do something right after
  // the loop has finished
}

var options = {
	startAt: 0, // index to start from
	endAt: false, // index to end at (false === end of array)
	timeout: calculateTimeout,
	onEnd: done
};


$('li').step(doEveryStep, options);

You can check out the jquery.step mini demo page for a simple working example.

Usage

You can include the minified script into your project directly or you can install this script via npm or bower.

npm install jquery.step --save

or

bower install jquery.step --save

and then include in your project using any UMD compatible method you like

Properties & Config

jQuery.step takes two parameters: