visuales - ¿Cómo puedo mover un div y cambiar su tamaño con efecto de animación en JQuery?

mostrar y ocultar div con el mismo boton jquery

Question

¿Cómo puedo mover un div y cambiar su tamaño con efecto de animación en JQuery?

es decir, div estará en el medio de la pantalla e irá al lado izquierdo y tendrá un% 50 de su altura y un% 50 de su ancho después de completar su movimiento. (Tendrá, por ejemplo, un% 75 de su tamaño en el en medio de su camino)

EDITAR: Intenté eso:

$(".block").animate({"left": "-=100px", "height": "-=30%", "width":"-=30%" }, 1000);

Sin embargo, desaparece?

EDIT2: Esto funciona:

$(".block").animate({"left": "-=100px", "height": "30%", "width":"30%" }, 1000);

Sin embargo, aumenta mi cuadrado, intento = -30% pero no funciona. ¿Qué debo hacer cada vez más pequeño en lugar de crecer?

Answer 1

Parece que la última línea establece las propiedades css de altura y ancho en 30%. Espera que sea el 30% de los tamaños anteriores, pero en realidad es el 30% del elemento primario del bloque más cercano, que parece ser más grande que el tamaño anterior.

No creo que haya una manera simple de cambiar el tamaño de un porcentaje determinado del tamaño anterior (como una sintaxis especial en animada o algo así). Supongo que tiene que codificar una función de JavaScript que calcula el nuevo ancho del antiguo.

Dado que solo desea cambiar el tamaño de un elemento, le sugiero encarecidamente que utilice el elemento ID en lugar de su clase. Entonces la siguiente línea debería hacer lo que quieras:

$("#block").animate({"left": "-=100px", "height": $("#block").height()*0.5, "width":$("#block").width()*0.5 }, 1000);

Answer 2

Puedes usar la función animada de jQuery. Puedes consultar este enlace:

  http://api.jquery.com/animate/

En el enlace de arriba, los ejemplos te muestran todas las cosas que deseas (como cambiar el ancho con animación). Por favor verifica el ejemplo.