如何动画宽度和计算新的左位置在同一时间与jQuery

How to animate the width and calculate the new left position at the same time with jQuery?

本文关键字:位置 jQuery 同一时间 计算 何动画 动画      更新时间:2023-09-26

jQuery中的animate()函数有一个问题:

$(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
});

例子:

假设我有一个div,我想把它的大小调整到200%。div的起始距为20px,宽度为200px。

在应用activeClass之后,它的边距现在可能是40px宽,它现在有一个边框和一个新的宽度400px,因为animate()函数是这么说的;)

因此我需要在动画期间设置新的outerWidth(true)来计算新的位置

解决方案吗?

我认为你可以在动画中使用自定义的"step"函数来计算左边的位置。如下所示:http://api.jquery.com/animate/.