Question

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

所以甚至可以从position：absolute到position：jquery中的相对动画？

这就是我所拥有的：

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

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

})

Answer 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，但它应该有用。

Answer 2

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

Answer 3

没有

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

Answer 4

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

function specialSlide(el, properties, options){
    //http://stackoverflow.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);

Answer 5

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

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

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

})

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

5 个答案: