[SOLUCIONADO] ¿Cómo emular del todo una animación CSS con jQuery?

[berkeleyPunk]

Buen día.

Pues el título parece bastante claro. Quiero que una animación jQuery se vea igualita que si la hubiese hecho con CSS.

Para lograr esto, me encuentro con dos problemas con la animación jQuery, la cual entra en acción con el cursor encima:

1. Si mantengo en movimiento el cursor, la animación se hace en un loop infinito. Y la idea es que sólo dé una vuelta.

2. El parámetro opcional easing, hasta donde entiendo, sólo tiene dos valores de cadena posibles "swing" y "linear". ¿Esto es cierto o hay más? Más aún, ¿se pueden establecer valores numéricos, digamos, cubic-bezier, y si sí, cuál sería la sintaxis?

Esta sería la animación CSS y Esta sería la animación jQuery

Saludos!

[PHPeros]

Personalmente no haría ningún efecto con JavaScript/jQuery que se pudiera hacer con CSS, ya que con éste último los efectos que se consiguen son bastante mejores.

Bueno, si entendí bien quieres que la animación se ejecute una sola vez, para ello puedes asignar el evento mouseover mediante el método one(). Trabajando se vería tal que así.

Respecto al easing, solo tiene dos valores como dices, pero existen plugins con otros efectos. Lo de los valores numéricos, que yo sepa, no hay disponibles sistemas de trazado como el cubic-bezier.

Saludos

[berkeleyPunk]

Iniciado por PHPeros

Personalmente no haría ningún efecto con JavaScript/jQuery que se pudiera hacer con CSS...

Qué tal eh! Muy bien maestro PHPeros. Pues te doy la razón, la bronca es que tengo por ahí unas animaciones CSS que, faltaba más, no funcionan en IE8. Así que le pido un poco de ayuda al jQuery para este menester.

Iniciado por PHPeros

...puedes asignar el evento mouseover mediante el método one()...

Imaginaba que alguien respondería con una función casera de cómo hacer que la animación diera una vuelta. No sé, algo como:

Código Javascript:

var i = 0;
 
if(i == 0)
{
    // Ejecutar animación 
    i = i++;
}
else
{
    // No ejecutar animación 
}
 

El método one() está perfecto, y de hecho soluciona mi problema específico, pues en mi caso no necesito que la animación se ejecute más de una vez. ¿Pero qué tal si uno quisiera que la animación se ejecutara cada vez que sucede el evento mouseover, tal como pasa con la animación CSS?

Saludos!