jQuery Stepbystep Plugin

Stepbystep is basic jQuery step effect plugin for all objects. Copyright (c) 2012 tinysay.com

Download the following:
jquery.stepbystep.js
jquery.stepbystep.min.js
(use this if you don't want to have to change your easing type names)

Sample 1

JS
$('ul li').stepbystep({
	start : false,  // close for false or open for true
	effect : "slide", // slide or fade
    speed : 500, // animate speed
    wait : 100 // time of wait
},function(){
    alert("complate!");
});
HTML
<ul class="sample-2">
	<li><a href="#nowhere" title="Home">Home</a></li>
	<li><a href="#nowhere" title="About">About</a></li>
	<li><a href="#nowhere" title="Services">Services</a></li>
	<li><a href="#nowhere" title="Contact">Contact</a></li>
	<li><a href="#nowhere" title="Pellentesque">Pellentesque</a></li>
	<li><a href="#nowhere" title="Aliquam">Aliquam</a></li>
	<li><a href="#nowhere" title="Morbi">Morbi</a></li>
</ul>
EXAMPLE

Sample 2

JS
$('ul.sample-2 img').stepbystep({
    start : false,
    effect : "fade", // slide or fade
    speed : 500, // animate speed
    wait : 100, // time of wait
    random : true // random starting
},function(){
    alert("complate!");
});
HTML
<ul class="sample-2">
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>  
</ul>
CSS
ul.sample-2 { list-style:none; width:630px; margin:0 auto; }
ul.sample-2 li { float:left; width:100px; height:100px; display:block; }
EXAMPLE

Sample 3

JS
$('ul.sample-2 img').stepbystep({
    start : false,
    effect : "fade", // slide or fade
    speed : 500, // animate speed
    wait : 100, // time of wait
    random : true, // random starting
    onebyone : true, // one object open/close and next object 
},function(){
    alert("complate!");
});
HTML
<ul class="sample-3">
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>
	<li><img src="../lib/100x100_JavaScript-logo.png" alt="" height="100" width="100"></li>  
</ul>
CSS
ul.sample-3 { list-style:none; width:630px; margin:0 auto; }
ul.sample-3 li { float:left; width:100px; height:100px; display:block; }
EXAMPLE

License

Stepbystep is released under a dual license. You can choose either the GPL or MIT license depending on the project you are using it in and how you wish to use it.

About the Author

Tamer Ağaoğlu, Turkish entrepreneur and developer based in Ankara/Turkey.

My Blog: www.tinysay.com