Question

I have a problem with the animate() function in jQuery:

$(this).addClass(activeClass).animate({
  position: 'absolute'
  width: '200%',

//Here is the problem. I need the new outerWidth(true) 
//(Width+Padding+Margin+Border) of the animated element to calculate 
//the new position. I want it to be centered from it's old position. 
//But it is still using the current outerWidth.

  left : -($(this).outerWidth(true)-defaultOuterWidth)/2

});

Example:

Let’s say I have a div that I want to resize to 200%. The div has a margin of 20px and a width of 200px in the beginning.

After the “activeClass” is applied it could be that the margin is now 40px wide, it now has a border and a new width of 400px because the animate() function said so 😉

Therefore I need the new outerWidth(true) DURING the animation to calculate the new position.

Any solutions?

Answer 1

I think you can use a custom “step” function with the animation to do your own calculation for the left position. It’s described here: http://api.jquery.com/animate/.