如何为 jQueryUI 定位元素设置动画

Posted 2023-05-08

【中文标题】如何为 jQueryUI 定位元素设置动画

【英文标题】：How to animate a jQueryUI positioned element

【发布时间】：2011-12-14 13:16:20

【问题描述】：

我有一个使用 jqueryUI 的位置定位的元素。

我需要能够通过调整偏移量来为这个元素设置动画（以便它保持相对于在初始化 jQueryUI 位置时指定的另一个元素。

我正在定位元素，如图所示：-

$('#toparrow').position (

            of: $('#relative_element'),
            my: 'center top',
            at: 'center top',
            offset: "0 0"

        )

并且想将偏移量设置为“0 -30”。

我怎样才能做到这一点？

【参考方案1】：

定位后，您可以制作相对动画：

$('#toparrow').position(
  of: $('#relative_element'),
  my: 'center top',
  at: 'center top',
  offset: '0 0'
);

$('#toparrow').animate(
    top: '-=30px'
);

由于缺少 = 符号的混乱，这里有一个 jsfiddle 来说明：

http://jsfiddle.net/bryanjamesross/Vz4WV/

【讨论】：

感谢 bryan，但不幸的是，这不会产生我想要的效果，因为我需要为“顶部”属性设置动画。这对于一个元素当然很好，但是我动态生成了许多这些元素，它们在另一个元素下显示。这意味着“顶部”属性最终对于所有元素都是相同的。我需要元素从它的原始位置移动 30px，而不是从顶部移动到 30px，如果这有意义的话。我的问题没有更清楚是我的错，我很抱歉。

好的，我已经改成这样了。就从它的原始位置动画它而言，它确实如此。这就是为什么它是一个 relative 动画。这就是'-30px'的作用。它告诉 jQuery 动画，从 它当前的位置，-30px 向上。

对不起...我应该提到我在设置元素样式时使用 position:absolute ，以免它们影响任何周围的元素，您的解决方案当然适用于将它们设置为 position:relative ，不幸的是，这在这种情况下不适合，并且 position:absolute 通过 css 设置（为了将元素堆叠在页面布局的顶部）它们都动画到相同的高度，而不是相对于原始位置的 -30px。再次为没有提供足够的细节而道歉。

我的错，我错过了一个字符（一个 = 符号）。它现在应该做你想做的事

太棒了！它工作得很好！也很简单......我实际上不知道你可以这样做来强制相对动画。非常感谢 Bryan，非常感谢。