How do I use transitionend in jQuery?

Question

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

Answer 1

Use jQuery data to attach stateful data to the element. Use a boolean value to "block" events from happening and flip the boolean variable once transitionend completes. Use xram's code to hook up all cross-browser transitionend events at the same time.

So for your example...

1. onclick set this.data('transitioning', true)
2. when transitionend fires, set this.data('transitioning', false)
3. don't perform animation if this.data('transitioning') == true. this is captured and checked in your click event.