JQuery: я могу оживить положение: абсолютное положение: относительное?

Question

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

Так можно ли анимировать из позиции: абсолютная в позицию: относительная в 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

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

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

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

})

Answer 3

Мне нравится решение 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 4

номер

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

Answer 5

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