Jquery: можно ли анимировать позицию: абсолютная позиция: относительная?

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

так что даже можно анимировать из положения: абсолютное в положение: относительное в jquery?

это то, что у меня есть:

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

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

})

Ответы

Ответ 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');
    });
});

Это немного взломанный, но он должен работать.

Ответ 2

Я не думаю, что вы можете это сделать. jQuery animate работает только с любым "цифровым свойством CSS".

Ответ 3

Нет.

Однако вы можете проверить текущее местоположение элемента (вызов .position()), установить position в relative и оживить от исходного местоположения до текущего.

Ответ 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);

Ответ 5

Вы можете попробовать метод CSS, чтобы сделать его относительным, а затем анимировать.

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

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

})