4

我想按顺序为 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 动画完成时继续。

4

4 回答 4

3

我会使用 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();
于 2013-05-23T07:39:36.947 回答
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();
});
于 2013-05-23T07:50:05.410 回答
1

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

这是Jquery动画的API文档

您可以像这样轻松实现：

  $('.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

于 2013-05-23T07:28:54.377 回答
0

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

var total_div = $('.project_box').length; 变量计数 = 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();
于 2013-05-23T10:15:13.947 回答