Check if element is being animated CSS3 Check if element is being animated CSS3 javascript javascript

Check if element is being animated CSS3


When you change the left property of an element, you can associate a boolean value with it (using data() for instance) and set it to true to indicate a transition has started. Then, you can bind to the transition end event (which varies depending on the browser) and set the boolean value back to false from your handler to indicate the transition has ended.

The end result is something like:

yourElement.on(    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",    function() {        $(this).data("transitioning", false);  // Transition has ended.    });

(Note the code above only has to run once.)


if (!yourElement.data("transitioning")) {    // No transition active, compute new position.    var theNewLeft = yourElement.position().left + 200;    // Set new position, which will start a new transition.    yourElement.data("transitioning", true).css("left", theNewLeft);}