Javascript animating multiple divs in a sequence

Question

I want to animate divs sequentially but can't figure out how to do this, this is my code that wants to animate

<div id="project_container"> <div class="project_box"> <img src="images/project.jpg"> </div> <div class="project_box"> <img src="images/project1.jpg"> </div> <div class="project_box"> <img src="images/project2.jpg"> </div> <div class="project_box"> <img src="images/project3.jpg"> </div> <div class="project_box"> <img src="images/project4.jpg"> </div> <div class="project_box"> <img src="images/project5.jpg"> </div> </div> 

Here we have a similar type 6 div whose name. When the animation starts first, the animate div and the other 5 divs are hidden, and when the first div animation ends, the second div starts the animation and the next 4 div hide, similarly, when the second animation is completed, the third div starts this animation, continuing at the end of the last div animation.

Answer 1

This is the solution to this question, this answer must be written in recursive formulla

var total_div = $ ('. project_box'). length; var count = 0;

 function do_animate(){ if(count<total_div){ $('.project_box').eq(count).animate({'opacity':1,'width':'320px'},{ duration:1000, complete:function(){ count++; do_animate(); } }); } } do_animate(); 

Answer 2

I would use jQuery to create animations. check out the working demo:

FIDDLE example

for quick reference, here is the javascript code:

 var box_count = -1; // store boxes in a variable for later reference, this increases javascript speed var boxes = $('#project_container').children(); // initially hide all boxes boxes.hide(); var animate_box = function(){ // get next box box_count++; //check if boxes are left if(box_count < boxes.length ){ //do your Animation $(boxes[box_count]).fadeIn({ //call animation again once complete complete: animate_box }); } } //start first animation animate_box(); 

Answer 3

FIDDLE Working Demo

Using RAW JavaScript can be a bit complicated, but if you prefer to use jQuery, a recursive function can do this for you:

 $(function () { function show() { // get first hide element and show it $('.project_box:not(.completed):first').show(500, function () { // mark it as completed $(this).addClass('completed'); // show next one show(); }); } // invoke the function for the first time show(); }); 

Answer 4

I recommend a jQuery user do this

This is a jquery animation API document

You can easily achieve the following:

  $('.project_box').animate({ width: '100px' }, 5000, function() { // Animation complete. }); 

In your case, the animation is one after another:

 var childArray = new Array(); $(". project_box").each(function(){ childArray.push($(this)); }); runAnimation(); int count = 0; function runAnimation(){ childArray[0].animation({ width: '100px' }, 1000, function(){ if(++count < childArray.length) runAnimation(); }); } 

PS: I have not tried, but the structure is fine, you are trying to follow the structure: D