函數中的延遲和隊列動畫 - 如何通過刪除重複代碼來優化此動畫？

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/