jquery: czy mogę animować pozycję: absolutna do pozycji: względna?

Question

Mam kilka obrazów, które są ustawione absolutnie, chcę móc kliknąć przycisk i mieć wszystkie animacje do miejsca, w którym normalnie byłyby na stronie, gdyby miały pozycję: względną.

czyli czy możliwe jest nawet animowanie z pozycji: absolutna do pozycji: względna w jquery?

to, co mam:

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

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

}) 

Answer 1

Nie, nie można go animować bezpośrednio, ale można znaleźć punkt końcowy i ożywić tam pozycję. Coś jak to może działać, gdy animację do pozycji 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'); 
    }); 
}); 

To trochę hacky, ale powinno działać.

Answer 2

I nie sądzę, że można to zrobić. jQuery animate działa tylko na dowolnej "numerycznej właściwości CSS".

Answer 3

nr

Jednakże, można sprawdzić aktualną lokalizację elementu (wezwanie .position()), ustaw position do relative i animowanie z pierwotnej lokalizacji do obecnego.

Answer 4

Lubię rozwiązanie tATu, ale uznał ten kod wielokrotnego użytku będzie lepiej dla moich celów:

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); 
} 

Powiedzmy, że chcemy przesunąć $ („# elementToMove”) do nowej pozycji, a ja chcę go prześlij 1000 milisekund. Mogę to nazwać:

var props = {'top' : 200, 'left' : 300}; 
var options = {'duration': 1000}; 
specialSlide($('#elementToMove'), props, options);