CODEWITHSUNDEEP
javascript
Mithun Adhikary
Mithun Adhikary

Reputation: 103

Javascript animating several DIV's in a sequence

I want to animate div sequentially, but can not understand how to go about it, this is my code which want 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 similar type of 6 div, which name . When animation start first div animate and other 5 div hide and when first div animation complete, second div start animate and next 4 div hide, similarly when second div complete animation, third div start these animation continue when last div animation complete.

Upvotes: 4

Views: 135

Answers (4)

Mithun Adhikary
Mithun Adhikary

Reputation: 103

This is the solution of these question, these answer must be written 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();

Upvotes: 0

Roman Abt
Roman Abt

Reputation: 444

i'd use jQuery to do the animation. 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();

Upvotes: 3

user1823761
user1823761

Reputation:

Working FIDDLE Demo

Using the RAW JavaScript maybe a bit difficult, but If you prefer to use jQuery, a recursive function can do it 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();
});

Upvotes: 2

Jeff Lee
Jeff Lee

Reputation: 781

I recommend you to user Jquery to do that

This is the API document of Jquery animation

You can easily achieve like this : 

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

For your case, to animatie one by one:

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 didnt try it, But the structure is ok, You try to follow the structure :D

Upvotes: 1

Related Questions