Question

我想按顺序为div设置动画，但是无法理解如何去做，这是我想要动画的代码

<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>

这里我们有类似的6 div，这个名字。当动画开始第一个div动画和其他5 div隐藏并且当第一个div动画完成时，第二个div开始动画和下一个4 div隐藏，类似当第二个div完成动画时，第三个div开始这些动画继续当最后一个div动画完成时。

Answer 1

我使用jQuery来制作动画。查看工作演示：

FIDDLE Example 的

快速参考，这是javascript代码：

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 2

Working FIDDLE Demo 的

使用RAW JavaScript可能有点困难，但如果您更喜欢使用jQuery，递归函数可以为您完成：

$(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 3

我建议您使用Jquery来执行此操作

This is the API document of Jquery animation

您可以轻松实现这样的目标：

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

对于你的情况，逐个动画：

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：我没试过，但结构还可以，你试着按照结构：D

Answer 4

这是这些问题的解决方案，这些答案必须写成递归公式

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();

Javascript按顺序为几个DIV制作动画

4 个答案: