javascript - 我的 jQuery 动画有效，但我想进一步改进它

Question

这是我的动画实验，它主要按我的预期工作。但是，我希望动画一一发生。这意味着具有 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/

score 1 · Accepted Answer

更新了 JSFiddle

而不是试图延迟动画和工作我们的时间等，你可以简单地设置一个函数调用在你的动画步骤完成时发生。

该animate()函数可以选择接受额外的参数。从手册：

.animate（属性[，持续时间] [，缓动] [，完成]）

...

完全的

类型：函数（）

动画完成后调用的函数。

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

$('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;
    };

});

score 0 · Accepted Answer

好的，我在评论中的建议只是简单的示例，延迟持续时间太长，以及动画持续时间。这是您更改的 js 代码，因此您在延迟方面有一些更平滑的重叠和更快的动画（我已将一些注释作为解释）：

$(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 开始更改。

score 0 · Accepted Answer

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

这里是这样的

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

javascript - 我的 jQuery 动画有效，但我想进一步改进它

3 回答 3

更新了 JSFiddle

Related

Reference