Delay and queue animation in a function - how can I optimise this by removing duplicate code?

I have this script that moves a box around the screen and the loops the second part of the movement. I have altered the code to drop another three boxes (4 in total) into the animation so the boxes follow each other around the screen.

I want it to work exactly like it does, but I'm sure there's a much better way of doing this:

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: '157p

You are repeating yourself a ton here, you should read up on DRY.

You could store the animations in an array and then execute those animations :

var PROPERTIES = 0 , OPTIONS = 1;
var animations = 
[ 
  [ {top: '425px'}         , { duration: 1800, easing : 'linear', queue: true } ],
  [ {marginLeft: '-284px'} , { duration: 2500, easing : 'linear', queue: true } ],
  [ { top: '157px'}        , { duration: 1800, easing : 'linear', queue: true } ],
  [ {marginLeft: '264px'}  , { duration: 2500, easing : 'linear', queue: true } ]
] 

function animateNode( $node )
{
  animations.forEach( function (animation)
  {
    $node.animate( animation[PROPERTIES] , animation[OPTIONS] ); 
  });
}

function animateNodes()
{
  animateNodes( $('.node') );
  animateNodes( $('.node2') );
  animateNodes( $('.node3') );
  animateNodes( $('.node4') );
}

Ideally of course, you would store the results of $(...) in a variable and use that variable instead of invoking $(...) every single time. Even more ideally, those variables would be in an array over which you can loop.

You can apply this technique to the rest of your code as well.

StackExchange Code Review Q#38915, answer score: 3