javascript - 函数中的延迟和队列动画 - 如何通过删除重复代码来优化它？

Question

我有一个脚本，可以在屏幕上移动一个框，并循环移动的第二部分。我更改了代码，将另外三个框(总共 4 个)放入动画中，以便这些框在屏幕上相互跟随。

我希望它像它一样工作，但我确信有更好的方法来做到这一点:

Here's a js fiddle: http://jsfiddle.net/NF6LU/

JS

function animateNode() {
    $('.node').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node2').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node3').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node4').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node2').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node3').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node4').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node2').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node3').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node4').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true });
    $('.node').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node2').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node3').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true });
    $('.node4').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true });
}
$('.node').delay(1500).animate({top: '157px'}, { duration: 1000, easing : 'linear', queue: true });
$('.node2').delay(3000).animate({top: '157px'}, { duration: 1000, easing : 'linear', queue: true });
$('.node3').delay(4500).animate({top: '157px'}, { duration: 1000, easing : 'linear', queue: true });
$('.node4').delay(6000).animate({top: '157px'}, { duration: 1000, easing : 'linear', queue: true });
$('.node').animate({marginLeft: '264px'}, { duration: 1500, easing : 'linear', queue: true });
$('.node2').animate({marginLeft: '264px'}, { duration: 1500, easing : 'linear', queue: true });
$('.node3').animate({marginLeft: '264px'}, { duration: 1500, easing : 'linear', queue: true });
$('.node4').animate({marginLeft: '264px'}, { duration: 1500, easing : 'linear', queue: true });
$(function(){
    animateNode();
    setInterval(animateNode, 2000);
});

HTML

<span class="node"></span>
<span class="node2"></span>
<span class="node3"></span>
<span class="node4"></span>

CSS

span.node, span.node2, span.node3, span.node4{
    height: 16px;
    width: 16px;
    background-color: black;
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -9px;
}

Answer 1

您可以尝试更改 animateNode 以仅对一个类进行动画处理，如下所示

function animateNode() {
      //animate each node 
      $('.node').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true })
                .animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true })
                .animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true })
                .animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true });
}
$(".node").each(function(i,n){
    //animate each node with increment on delay 
    $(this).delay(1500*(i+1)).animate({top: '157px'}, { duration: 1000, easing : 'linear', queue: true })
           .animate({marginLeft: '264px'}, { duration: 1500, easing : 'linear', queue: true });
});
$(function(){
    animateNode();
    setInterval(animateNode, 2000);
});    

http://jsfiddle.net/NF6LU/1/