jquery: ¿puedo animar la posición: absoluta a posición: relativa?

Question

tengo un montón de imágenes que están posicionadas absolutamente, quiero poder hacer clic en un botón y hacer que todas ellas se animen a donde normalmente estarían en la página si tuvieran la posición: relativa.

Entonces, ¿es posible animar desde la posición: absoluta a la posición: relativa en jquery?

esto es lo que tengo:

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

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

}) 

Answer 1

No, no puede animarlo directamente pero puede averiguar el punto final y animar la posición allí. Algo como esto podría funcionar animación cuando a la posición 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'); 
    }); 
}); 

Es un poco hacky, pero debería funcionar.

Answer 2

No creo que se puede hacer eso. jQuery animate solo funciona en cualquier "propiedad CSS numérica".

Answer 3

Nº

Sin embargo, se puede comprobar la ubicación actual del elemento (llamar .position()), establecer el position-relative, y la animación de la ubicación original a la actual.

Answer 4

me gusta la solución de Tatu, pero encontré este código reutilizable para ser mejor para mis propósitos:

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

Digamos que quiero deslice $ ('# elementToMove') a una nueva posición, y yo quiero que toma 1000 milisegundos para moverte. Puedo llamar a esto:

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