jQuery：我可以将position:absolute动画到position:relative吗？

Question

我有一堆绝对定位的图片，我想点击一个按钮，让它们动画到它们在页面上通常应该出现的相对位置。

那么，在jQuery中从position:absolute到position:relative是否可能实现动画效果？

这是我的代码：

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

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

})

- ExodusNicholas

---

你确定你要用 相对定位(relative) 而不是 静态定位(static) 吗？ 因为 静态定位(static) 是默认的。 - Tatu Ulmanen

Answer 1

不，您不能直接对其进行动画处理，但可以找到结束点并将位置动画处理到那里。类似于以下内容可能适用于动画处理到“静态”位置时：

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

虽然有点取巧，但它应该可以工作。

- Tatu Ulmanen

---

你应该调用 position()，而不是 offset()。 - SLaks

啊，你太棒了。唯一的问题是所有图片（它们分散在页面上）都会动画到第一张图片的位置，然后它们立即出现在它们自己的静态位置，但每个图片并没有动画到它自己的静态位置。有什么办法可以解决这个问题吗？ - ExodusNicholas

执行一个 each 循环，您可逐个处理每张图片。您可能正在选择一个声明中的所有元素（您的 var el 大致是 $('img.foo')），这会使所有操作相对于第一张图像。我已更新我的帖子以显示此内容。 - Tatu Ulmanen

现在第一张图片动画到了它该去的地方，但是所有其他图片都会动画到第一张图片原来的绝对位置。 - ExodusNicholas

@ExodusNicholas，也许在发布之前我应该先测试一下 :) 我会在某个时候查看它。 - Tatu Ulmanen

Answer 2

我喜欢Tatu的解决方案，但是我发现这段可重用代码更适合我的需求：

function specialSlide(el, properties, options){
    //https://dev59.com/dXE95IYBdhLWcg3wrP-w#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);

- Ryan

Answer 3

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

- rosscj2533

---

不完全是这样...你也可以改变文本或背景的颜色。 :) - Thiago Belem

但是颜色不是一个数值吗？ - ExodusNicholas

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

如果您观察jQuery在执行颜色动画时的代码，您会看到RGB值被放置在元素的样式属性中，并且会增加/减少（就像rosscj2533所说的那样）。 - ExodusNicholas

Answer 4

不行。

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

- SLaks

---

我不确定该如何开始，你能帮我一下吗？我的目标是为用户提供两种不同的视图。每篇文章都有一张图片，我想让这些图片在按下第二个视图按钮时能够动画移动它们的位置，然后当按下第一个视图按钮时，它们会动画回到第一个位置。 - ExodusNicholas

例如，请参考Tatu Ulmanen的答案，这正是我所描述的。 - SLaks

Answer 5

你可以尝试使用CSS方法使其相对位置，然后进行动画效果。

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

- Muhammad Russell