Check if element is being animated CSS3

Question

Is there any way to check if element is being animated?

But being animated not with jquery's animate, but with css3's transition..

The problem I have is... I have this slider, on arrow click I give it

left = left+200

where left is either

element.position().left

or

parseInt(element.css("left"));

(it doesn't really matter, the problem occurs with either)

the element is being animated with

transition: left 400ms ease-in-out;

so, when the user clicks on the arrow once and then again before the animation finishes, left returns value depending on its position(so instead of say.. 400px, it might return 235.47px since it was clicked in the middle of the animation)..

Answer 1

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);
}