$.animate with one value depending on the other

$.animate with one value depending on the other

Hi everyone,
i want to make an animation where one value depends on the other. 

Let's say i want to animate both the 'top' and 'marginTop' properties, where i want the marginTop property to use the current value of the 'top' property.

I could do something like this:

  1. $("#foo").animate({
  2.       top : "100px",
  3.       marginTop : ($("#foo").css('top') * 2) + 'px'
  4. });

But that doesn't work, i guess because the css('top') method only gets called after the animation has finished. 

Is there a trick to get the value of 'top' in the 'marginTop' property?