2011-08-09 32 views
8

¿Es una manera de detectar si un elemento está animando o detectar si los valores de un elemento están cambiando?jQuery animación detectar si la animación?

Porque necesito activar una función si un elemento está animando. No onComplete of animate.

+0

Activar cuando? –

Respuesta

21

Los siguientes rendimientos cierto cuando el elemento seleccionado se animando:

var isAnimating = $("#someid").is(':animated'); 

más detalle:

http://api.jquery.com/animated-selector/
y/o
http://api.jquery.com/animate/
paso: Una función ser llamado un después de cada paso de la animación.

+0

Andy, por favor, ¿puedo aclarar mi comprensión del pseudo-selector: animado. El comportamiento que estoy viendo es que una vez que el elemento ha comenzado a ser animado, es (: animado) verdadero incluso cuando el elemento ha sido devuelto a su punto de partida. Por lo tanto, estoy usando el paso para detectar cuando una animación ha alcanzado su posición animada. ¿Hay alguna manera de activar y desactivar el pseudo selector? – codepuppy

+0

@codepuppy esto es extraño, hice una prueba aquí: http://jsfiddle.net/aPk3y/1/ y devuelve el valor correcto. No creo que haya una manera fácil de manipular: animada directamente. – Andy

+0

Andy gracias por este ejemplo. OK, así puedo ver que funciona para ti. Por lo tanto, debo estar cometiendo un error en alguna parte. Volveré y revisaré mi prueba nuevamente. – codepuppy

1

Una manera simple sería agregar un valor booleano global que se establece en true tan pronto como comience la animación. Luego agrega una función de devolución de llamada a la animación que lo establece en false cuando termina.

var running = false; 

$('#start').click(function(){ 

    running = true; 

    $('#target').animate({opacity: 0.5},'slow',function(){ 

     running = false; 

    }); 

}); 

Editar: Oh, supongo que hay un selector para ello.

+1

Si usa este método, tenga en cuenta cómo lo usa, porque en situaciones únicas podría causar una condición de carrera. Ejemplo: '1. Haga clic en el botón de inicio (1) - running = true - t = 0ms' '2. Haga clic en el botón de inicio (2) - running = true - t = 200ms'' 3. Animación (1) termina ejecutando = falso - t = 600ms'' 4.Animación (2) ejecutándose - corriendo = falso - 600ms

0

Porque necesito activar una función si un elemento está animando. No onComplete of animate.

Desde $(element).on(":animated", function(){ ... }); no parece funcionar, la única manera que puedo ver es muy simple ejecutar la función que desea llamar cuando se ejecuta la animación:

$(selector).animate(. . .); 
functionToCall(); //called with animate above 

Otra solución, eres tú podría crear su propia biblioteca que maneje las animaciones iniciales y también maneje las funciones necesarias una vez que comience a animar de la manera simple que describí anteriormente.

Así que sólo algunas psuedocode:

var animation = new MyAnimationLibrary(function() { $(selector).animate(...) }); 
animation.onStart.push(function() { 
    alert('animation starts'); 
}); 
//then later in the code: 
animation.start(); 

A continuación, sólo hacer la llamada por encima de las funciones de la matriz animation.onStart y el disparador de la animación.

Cuestiones relacionadas