How to animate the width and calculate the new left position at the same time with jQuery?
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 开发者_JAVA技巧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?
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/.
精彩评论