Set one CSS property to the value of another in JQuery?

Question

For example, to animate a box from the left, I can set "left" to the negative value of "width", and animate it to zero:

 $('.box').each(function(){
      $(this)
           .css('left', $(this).width()*-1 )
     .animate({'left':0},1000)
     ;
 });

Is there a way to do this without the each function? THIS JQUERY IS TOO VERBOSE!

Answer 1

Put the function in its own function called animateBox(). Then you can do this:

$('.box').each(animateBox);

Answer 2

I'm not sure why you needed to add the "each" in the first place, because most jQuery functions work on multiple elements simultaneously. This should work:

 $('.box').css('left', $(this).width()*-1 ).animate({'left':0},1000);

EDIT: code doesn't work as mentioned in the comments, because $(this) doesn't refer to the right object. This should fix it:

 var $box = $box.css('left', $box.width()*-1 ).animate({'left':0},1000);