jquery：我可以动画位置：绝对位置：相对？

Posted 2023-05-08

【中文标题】jquery：我可以动画位置：绝对位置：相对？

【英文标题】：jquery: can i animate the position:absolute to position:relative?

【发布时间】：2011-01-13 06:00:28

【问题描述】：

我有一堆绝对定位的图像，我希望能够单击一个按钮并让它们全部动画到它们通常在页面上的位置：相对位置。

那么是否可以在 jquery 中从 position:absolute 到 position:relative 进行动画处理？

这就是我所拥有的：

$(".change_layout").click(function()

    $(".book_img").animate(position:'relative', top:'0px', left:'0px', 1000)

)

【问题讨论】：

您确定您的意思是relative 而不是static？因为static 是“默认”位置。

【参考方案1】：

不，您不能直接为其设置动画，但您可以找出终点并为那里的位置设置动画。当动画到 static 位置时，这样的事情可能会起作用：

$('img.foo').each(function() 

    var el = $(this);

    // Make it static
    el.css(
        visibility: 'hidden', // Hide it so the position change isn't visible
        position: 'static'
    );

    // Get the static position
    var end = el.position();

    // Turn it back to absolute
    el.css(
        visibility: 'visible', // Show it
        position: 'absolute'
    ).animate( // Animate to the static position
        top: end.top,
        left: end.left
    , function()  // Make it static
        $(this).css('position', 'static');
    );
);

这有点hacky，但它应该可以工作。

【讨论】：

你应该打电话给position()，而不是offset()。

啊，你太棒了。唯一的问题是所有图像（它们分布在页面上）动画到第一张图像的位置，然后它们立即出现在它们的静态位置，但是每个图像都没有动画到它自己的静态位置.任何线索如何解决这个问题？

执行each 循环，在其中单独处理每个图像。您现在可能正在选择一个声明中的所有元素（您的 var el 类似于 $('img.foo')，这使得所有操作都相对于第一张图像。我已经更新了我的帖子以显示这一点。

@SLaks，好点，我实际上一直使用offset()，但position() 似乎更合适。

现在第一个图像动画到它应该的位置，但所有其他图像动画到第一个图像所在的绝对位置。

【参考方案2】：

我认为你做不到。 jQuery animate 仅适用于任何“数字 CSS 属性”。

【讨论】：

不是真的...您也可以更改文本或背景的颜色。 :)

但是颜色不是数值吗？

@TiuTalk - 好点，但我认为 ExodusNicholas 是对的，在这种情况下，jQuery 将使用颜色的数字方面对其进行动画处理，适当地增加/减少 RGB 值以改变颜色。

如果您在 jquery 为颜色设置动画时查看代码，您会看到 RGB 值放置在元素样式属性中并增加/减少（如 rosscj2533 所说）。

【参考方案3】：

没有。

但是，您可以检查元素的当前位置（调用.position()），将position 设置为relative，然后从原始位置动画到当前位置。

【讨论】：

我不知道我会怎么做，你有机会帮助我开始吗？我想要做的是为人们提供 2 个不同的视图，每篇文章都有一个图像，我希望这些图像能够在按下第二个视图按钮时动画它们的位置，然后当按下第一个视图按钮时，让它们动画回到第一个位置。

例如，请参阅 Tatu Ulmanen 的回答，这正是我所描述的。

【参考方案4】：

我喜欢 Tatu 的解决方案，但发现这个可重用代码更适合我的目的：

function specialSlide(el, properties, options)
    //http://***.com/a/2202831/
    el.css(
        visibility: 'hidden', // Hide it so the position change isn't visible
        position: 'static'
    );
    var origPos = el.position();
    el.css(
        visibility: 'visible', // Unhide it (now that position is 'absolute')
        position: 'absolute',
        top: origPos.top,
        left: origPos.left
    ).animate(properties, options);

假设我想将 $('#elementToMove') 滑动到一个新位置，并且我希望它需要 1000 毫秒才能移动。我可以这样称呼：

var props = 'top' : 200, 'left' : 300;
var options = 'duration': 1000;
specialSlide($('#elementToMove'), props, options);

【参考方案5】：

您可以尝试使用 css 方法使其相对，然后进行动画处理。

$(".change_layout").click(function() $(".book_img").css('position': 'relative').animate(top:'0px', left:'0px', 1000) )