Create a chain of transitions using jQuery

Question

I have created a little jQuery function with the help of transit.js that applies a transition to an element, and then to the next element after the transition is done.

The code applies the transition ony by one to whatever element is inside the .container div.

You can see the code in action here:

 $(document).ready(function () { showDiv($('.container div:first')); function showDiv(tadaa) { tadaa.transition({ opacity: 1 }, 1000, function () { //call back showDiv(tadaa.next()); }); } }); 

 .container { border: 2px solid; } .container *{ opacity: 0; display: inline-block; width: 50px; height: 100px; margin: 10px; vertical-align: top; } .container div { background-color: black; } .container p { background-color: red; } .container span { background-color: green; } .container input{ background-color: blue; border: none; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> <div class="container"> <div></div> <p></p> <span></span> <p></p> <div></div> <input> <div></div> <p></p> </div> 

What would be the best way to accomplish this with jQuery but without using transit.js?

Answer 1

To do this with jQuery alone just change transition() to animate() :

 $(document).ready(function() { showDiv($('.container div:first')); function showDiv(tadaa) { tadaa.animate({ opacity: 1 }, 1000, function() { //call back showDiv(tadaa.next()); }); } }); 

 .container { border: 2px solid; } .container * { opacity: 0; display: inline-block; width: 50px; height: 100px; margin: 10px; vertical-align: top; } .container div { background-color: black; } .container p { background-color: red; } .container span { background-color: green; } .container input { background-color: blue; border: none; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div></div> <p></p> <span></span> <p></p> <div></div> <input> <div></div> <p></p> </div>