Confirmadme si funcionaría

[iEnrique]

Bueno, me gustaría que me dijérais antes de empezar a hacer una cosa que tengo planeada si esto está bien:

Lo que quiero es que un cuadrado al pulsar disminuya su tamaño (respecto al ancho) con una animación lenta más o menos, esto es como pienso que se haría:

Código Javascript:

function animacion{
     var cuadrado = document.getElementById("content");
     cuadrado.animation({width: 100px;});
}
 

Código HTML:

<div id="content" style="width:200px;height:200px;background-color:#000;"></div>
 

¿Estoy en lo cierto? Si no es así os agradecería si me ofrecierais un poco de info. o una página donde lo explique. Muchas gracias por su atención .

[Trublux]

En la documentación de JQuery animate viene un ejemplo parecido.
En ese ejemplo la caja se hace más grande y no es al pulsar en ella, si no en un botón, pero con unos pequeños cambios puedes hacer lo que pretendes.

P.D.: Los estilos es mejor ponerlos en un archivo CSS.

[madman_18]

Yo lo que haría sería registrar el evento del click del elemento con el que quieres trabajar ("content") y ahí ejecutaría el animate que haces. Tal y como lo tienes ahora, no llama a la función nunca (supongo que es que no lo has puesto) así que si lo haces así te ahorras de ponerle eventos onclick y demás al div.

Pd: como dicen más arriba, los estilos CSS es mejor ponerlos en tu archivo css con todas las reglas

Código Javascript:

$(document).ready(function(){
 
$("#content").click(function(){
// aquí ejecutas el animate usando $(this) o también $("#content");
});
});