jQuery: Animar ancho/alto, pero permanecer centrado

Tengo un elemento en la página que ya he centrado horizontal y verticalmente (es un diálogo modal jQuery UI), y quiero cambiar el tamaño usando .animate() como este :jQuery: Animar ancho/alto, pero permanecer centrado

<div id="element" style="width: 100px; height: 100px;"> 
    Hi Stack Overflow! 
</div> 

<script type="text/javascript"> 
    $('#element').animate({ height: "200px" }); 
</script>

Eso funciona bien, excepto que el elemento solo crece hacia abajo. Lo que trato de hacer es hacer que el elemento crezca verticalmente en ambas direcciones (en este caso 50px en cada dirección) para que permanezca centrado. ¿Hay alguna forma de hacerlo?

Fuente

2011-03-03 mellowsoon

Live Demo

var growEl = $("#grow"), 
    curHeight = $("#grow").height(), 
    curTop = growEl.offset().top, 
    newHeight = 200, 
    newMargin = curTop -(newHeight -curHeight)/2; 

if(newMargin < 0){ 
newMargin = 0; 
} 

$("#grow").animate({height:newHeight+"px", marginTop:newMargin + 'px'});

Fórmula para averiguar qué hacer con el margen

NewTopMargin = CurrentMargin-(NewHeight-OldHeight)/2

Gracias por recordarme @bobsoap utilizar offset.top

Fuente

2011-03-03 15:07:35 Loktar

Eso es lo que probé al principio, pero descubrí un defecto. El nuevo margen superior puede ser un número negativo si la ventana del navegador es pequeña. En ese caso, el elemento debería crecer tanto como pueda (con un margen) y hacia abajo el resto del camino. Esperaba que no hubiera muchos cálculos matemáticos o complicados de animación. Quiero mantener esto rápido. – mellowsoon

Bien actualizado, ahora si es negativo, solo crecerá a 0. – Loktar

@mellowsoon puede obtener la posición del elemento con 'offset', luego acceda con' offset.top'. No puedes moverte haciendo algunas matemáticas, pero de todos modos no es un "cálculo de animación complicado". Primero haces algunos cálculos básicos, en los que JS es rápido, luego haces una única función animada(), que ya estás haciendo. – bobsoap

margin-top: -50px, height: 50px;

Ese tipo de cosas (lo siento, no es un código formateado) estoy seguro de que puede insertarlo correctamente.

Fuente

2011-03-03 15:08:45 benhowdle89

jQuery: Animar ancho/alto, pero permanecer centrado

Respuesta

Cuestiones relacionadas