jquery - jquery - запрос:могу ли я анимировать position:absolute в position:relative?

Question

у меня есть куча изображений, которые расположены абсолютно, я хочу иметь возможность нажать кнопку и анимировать их все там, где они обычно находились бы на странице, если бы у них было соответствующее положение:относительный.

итак, возможно ли вообще анимировать из position: absolute в position: relative в 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');
    });
});

Это немного халтурно, но это должно сработать.

Answer 2

Я не думаю, что ты сможешь это сделать.jQuery - jQuery - запрос оживлять работает только с любым "числовым свойством 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)

})