jQuery: Animate Margins to Auto?

Question

Estoy tratando de animar una imagen para que se centre. Aquí está el código que me gustaría usar:

$('#myImage').animate({'margin-right': 'auto'}); 

Pero cuando hago eso, se ignora y no cambia el margen.
¿Hay alguna manera de animar un margen para auto, o de lo contrario centrar una imagen?

Gracias!

Answer 1

Como 'auto' no es un número, jQuery no puede animarlo.

Si estás bien con la toma de la imagen fuera del flujo del documento, puede establecer condiciones de absoluta o fija y tratar:

$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 }); 

Answer 2

No se puede animar una propiedad auto. Para animar adecuadamente el elemento al centro de la pantalla, deberá colocarlo absolutely (u otro) y luego calcular el tamaño de la pantalla, el tamaño del elemento y la posición de desplazamiento. Aquí hay un another SO answer en algo similar. Here is the Fiddle

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    var top = ($(window).height() - this.height())/2+$(window).scrollTop() + "px", 
     left = ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"; 
    this.animate({top: top, left: left}); 
    return this; 
} 

Alternativamente, si sólo desea que el alineamiento horizontal se puede quitar la parte superior de la función de animar. Y si realmente quiere ser creativo, puede eliminar el position:absolute, y reposicionar margin:auto después de la animación en caso de cambiar el tamaño de la pantalla. See another fiddle.

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    var left = ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"; 
    this.animate({left: left}, function(){ 
     $(this).css({position: 'static', margin: '0 auto'}); 
    }); 
    return this; 
} 
$('#selector').center(); 

Answer 3

Ampliando la respuesta de Josías Ruddell. Si necesitan su imagen para mantener su flujo en el documento, use esta versión modificada de la respuesta de Josiah. Mi imagen se colocó originalmente en el margen: 0-1000 px, y se desliza hacia el margen calculado hacia la izquierda y hacia la derecha. Mientras se mantiene su flujo en el Reino todo el tiempo

jQuery.fn.center = function() { 
var margin = ($(window).width() - this.width())/2; 
this.animate({marginLeft: margin, marginRight: margin}, function(){ 
    $(this).css({margin: '0 auto'}); 
}); 
return this; 

}