How do I use transitionend in jQuery?

jquery css-transitions
JacobTheDev picture JacobTheDev · Aug 20, 2011 · Viewed 43k times · Source

I need to detect if a CSS transition is completed before allowing a function to repeat again, to prevent messing up the margins.

So how cam I have something like

if (transitionend == true) {
  // do stuff
} else {
  // do nothing
}

Answer

xram picture xram · Nov 12, 2012

The code below will trigger on the transitionend event for whatever element(s) you have in the $element variable. There are four different event names as I believe these cover all of the cross-browser inconsistencies. Replace the '// your event handler' comment with whatever code you wish to run when the event is triggered.

$element.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    // your event handler
});

Related questions

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

http://jsfiddle.net/nicktheandroid/tVHYg/ When hovering .wrapper, it's child element .contents should animate from 0px to it's natural width. Then when the mouse is removed from .wrapper, it should animate back down to 0px. The .wrapper element should only …

Read More
CSS3 transitions inside jQuery .css()

When I add the transition line into my code it breaks jQuery. How can I fix it? a(this).next().css({ left: c, transition: 'opacity 1s ease-in-out' }); I'm trying to set up a fade from one div to the next …

Read More
Slide down animation from display:none to display:block?

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way? HTML: <div id="box"> Initial …

Read More