Menú Cerrar

Función .animate() de JQuery

Una de las funciones de JQuery más espectaculares, por lo visible de sus resultados, es la función .animate(). Esta función es similar a la función .css() en la manipulación de las propiedades CSS de los elementos, menos por un detalle, esta función suaviza o anima el cambio de valores en la propiedad. Actúa sobre casi todas las propiedades menos con background-color, como menciona su documentación.

Para ilustrar la función .animate() he hecho una pequeña animación de un bloque moviendose en espiral:

Ejemplo

El código JavaScript:

var ancho=115;
var vueltas=10;
var x=135;
var y=135;
var i=0;								
ancho=ancho*16;
vueltas=(2*vueltas*Math.PI)/ancho;
for(i=0;i<ancho;i++) { $('#bloque').animate({ top: (x+(Math.round(i*Math.cos(vueltas*i)))/15), left: (y+(Math.round(i*Math.sin(vueltas*i))/15)) },{ duration: 1 }); }

En este ejemplo la función .animate() ayuda suavizando el movimiento del bloque rojo que va cambiando su top y left conforme avanza el bucle for hasta terminar la espiral.

4 comentarios

  1. David

    Hola, creo que la solución hay que buscarla en ignorar las pulsaciones de teclas que se pulsan mientras se ejecuta la función del evento keydown.
    Ando un poco corto de tiempo para mirarlo ahora.
    Te digo algo en la que pueda.

  2. Carrusel

    Muchisimas gracias, ese codigo era simplificado y lo usaba tambien con click. Encontre la solución, o al menos un apaño.

    Para entrar en la función de sifuientes le pido que una variable sea igual a true, cuando entra la pongo a false y la vuelvo a poner a true cuando se termina la animación.

    Gracias de nuevo por hecharle un vistazo y felicitarte por tu gran blog, un saludo.

  3. David

    Hice alguna prueba rápida metiendo una variable a true y false para controlar tal como las has hecho tú, pero llevaba un poco de prisa y no me llegó a funcionar 😉

    ¡Gracias a tí!

Los comentarios están cerrados.