【问题标题】：My jQuery animation works, but I want to improve it further我的 jQuery 动画有效，但我想进一步改进它
【发布时间】：2013-07-29 02:32:04
【问题描述】：

这是我的动画实验，它的效果与我预期的差不多。但是，我想动画一一发生。这意味着具有 id1 的 div 先执行动画，然后具有 id2 的 div ......等等。我使用 for 循环来完成这个技巧，但动画发生得太快了。谁能让我知道如何使动画一个一个地发生，而不是几乎同时为所有 div 设置动画。提前感谢任何好心的帮助者。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery Animation - jsFiddle demo by dennisboys</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .items {
    float: left;
    margin-right: 3px;
    height: 50px;
    width: 50px;
    background-color: lightblue;    
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
/*
Javascript logics:
1. One click on each div can generate a full animation.
    - using a for loop to do the div animation
*/

$(document).ready(function(){

    // global variable for holding a fixed height increase
    var newHeight = 50;

    // global counter to keep track of which div is being clicked
    var counter = 1

    // count the number of divs on this page, a total of 9
    var divCount = $('.items').length; 

    $('.items').click(

        function(){         

            for(i=1; i<=divCount; i++){     

                // increase the global variable by 50
                newHeight += 50;

                // set random width and height
                var randomWidth = Math.floor( Math.random() * 201 + 50 );  // generate a number from 50 - 250
                var randomHeight = Math.floor( Math.random() * 201 + 50 );      

                $('#' + i).animate( {width:randomWidth, opacity:'0.3'}, 1000 );
                $('#' + i).animate( {height:randomHeight, opacity:'1' }, 1000 );
                $('#' + i).animate( {width:'50', opacity:'1'}, 1000 );
                $('#' + i).animate( {height:newHeight, opacity:'1' }, 1000 );

            }

        });

});
});//]]>  

</script>


</head>
<body>

        <div class="items" id="1" status="true"></div>
        <div class="items" id="2" status="true"></div>
        <div class="items" id="3" status="true"></div>
        <div class="items" id="4" status="true"></div>
        <div class="items" id="5" status="true"></div>      
        <div class="items" id="6" status="true"></div>
        <div class="items" id="7" status="true"></div>
        <div class="items" id="8" status="true"></div>
        <div class="items" id="9" status="true"></div>  

</body>


</html>

这里是 jsfiddle 页面。

http://jsfiddle.net/dennisboys/Qq247/

【问题讨论】：

尝试在动画之前添加延迟（），您将在毫秒数乘以 i：$('#' + i).delay(5000*i).animate( {width:randomWidth, opacity:'0.3'}, 1000 ); $('#' + i).delay(5000*i).animate( {height:randomHeight, opacity:'1' }, 1000 ); $('#' + i).delay(5000*i).animate( {width:'50', opacity:'1'}, 1000 ); $('#' + i).delay(5000*i).animate( {height:newHeight, opacity:'1' }, 1000 );
嗨 niklaz，实际上我尝试了 delay()，但我可能把函数放到了错误的位置，因为即使我使用 delay()，动画也会同时发生。像这样 "$('#' + i).animate( {width:'50', opacity:'1'}, 1000 ).delay(1000).animate( {height:newHeight, opacity:'1' }, 1000)"
您好 niklaz，您的代码可以运行，但是非常滞后，并且不是一个好的用户友好动画。还有其他方法可以实现吗？
我会建议你一件事。如果您在一页上有 4 到 5 个动画，并且您的目标设备是 iPad。不要使用 jQuery Animation。我不得不改变我的整个 straergy.Instead 使用 CSS3 动画。检查这个：stackoverflow.com/questions/10984771/…
@Dennisboys，我会单独回复

标签： javascript jquery

【解决方案1】：

更新JSFiddle

您可以简单地设置在动画步骤完成时发生的函数调用，而不是尝试延迟动画和处理我们的时间等。

animate() 函数可选择接受额外的参数。来自the manual：

.animate(属性[, 持续时间] [, 缓动] [, 完成])

...

完成

输入：Function()

动画完成后调用的函数。

这意味着您可以在动画完成后调用函数。这是一个简单的例子：

$('div').click(function() {
    $(this).animate({width: 200}, 5000, function() {
        alert('animation complete');
    });
});

在上面的代码中，我们在初始动画（宽度：200px）完成后弹出一条消息。

那么这对您有什么用处？那么，如果我们在第一个动画完成后调用我们的第二个动画，然后再调用第三个动画，以此类推？

$('#' + i).animate({width:randomWidth, opacity:'0.3'} , 1000, function() {
    $(this).animate({height:randomHeight, opacity:'1' }, 1000, function() {
        $(this).animate({width:'50', opacity:'1'}, 1000, function() {
            $(this).animate( {height:newHeight, opacity:'1' }, 1000);
        });
    });
});

编辑：这是重构后的代码：

function letsGo(i, newHeight) {
    var randomWidth = Math.floor(Math.random() * 201 + 50);
    var randomHeight = Math.floor(Math.random() * 201 + 50);
    $('#' + i).animate({width:randomWidth, opacity:'0.3'} , 1000, function() {
        $(this).animate({height:randomHeight, opacity:'1' }, 1000, function() {
            $(this).animate({width:'50', opacity:'1'}, 1000, function() {
                $(this).animate( {height:newHeight, opacity:'1' }, 1000);
            });
        });
    });
}

$('.items').click(function () {
    var newHeight = 50;
    var divCount = $('.items').length; 

    for(i=1; i<=divCount; i++) {
        letsGo(i, newHeight);
        newHeight += 50;
    };

});

【讨论】：

感谢 gvee，您的解决方案启发了我！

【解决方案2】：

好的，我在评论中的建议只是简单的示例，延迟持续时间太长，以及动画持续时间。这是你的js代码改变了，所以你有一些更平滑的延迟重叠和更快的动画（我已经放了一些cmets作为解释）：

$(document).ready(function(){

    // global variable for holding a fixed height increase
    var newHeight = 50;

    // global counter to keep track of which div is being clicked
    var counter = 1

    // count the number of divs on this page, a total of 9
    var divCount = $('.items').length; 

    $('.items').click(

        function(){         

            for(i=0; i<=divCount; i++){ //i=0, so first animation doesn't have delay. It can be done other ways, this is just one of them.      

                // increase the global variable by 50
                newHeight += 50;
                var delayInit  = 300-20*i; //this way we have overlap delays, so next animation of new element starts as previous is still doing
                var animationDuration = 300; //better to have out this param, so you can change it at one place
                // set random width and height
                var randomWidth = Math.floor( Math.random() * 201 + 50 );  // generate a number from 50 - 250
                var randomHeight = Math.floor( Math.random() * 201 + 50 );      

                $('#div' + (i+1)).delay(delayInit*i).animate( {width:randomWidth, opacity:'0.3'}, animationDuration,'linear' ); //if you want smoother animations, try to add after animationDuration some other easing option like easeOut, swing, linear, etc. instead of 'linear'. 
//For further and correct reference, consult with: http://api.jquery.com/animate/#animate-properties-duration-easing-complete
                $('#div'  + (i+1)).delay(delayInit*i).animate( {height:randomHeight, opacity:'1' }, animationDuration );
                $('#div'  + (i+1)).delay(delayInit*i).animate( {width:'50', opacity:'1'}, animationDuration);
                $('#div'  + (i+1)).delay(delayInit*i).animate( {height:newHeight, opacity:'1' }, animationDuration );

            }

        });

});

另外，您会注意到我更改了选择器，所以我建议您也这样做，因此为 id 分配 div1、div2 等内容...尽量避免纯数字。另外，您会看到我将循环计数从 0 开始更改。

【讨论】：

谢谢尼克拉兹！对不起，我只能打勾！我把它给了 gvee，他的解决方案启发了我自己的解决方案。再次感谢您的意见！

【解决方案3】：

为什么不使用延迟......

这里是这样的

$(document).ready(function() {
    $('#1').delay(8000).fadeIn(400);
    $('#2').delay(7000).fadeIn(400);
});

但请确保你的 div 一开始是隐藏的

<div class="items" id="1" status="true" **style="display:none"**></div>

【讨论】：