StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For transitions you can use the following to detect the end of a transition via jQuery:</p> <pre><code>$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... }); </code></pre> <p>Mozilla has an excellent reference:</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition</a></p> <p>For animations it's very similar:</p> <pre><code>$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); </code></pre> <p>Note that you can pass all of the browser prefixed event strings into the bind() method simultaneously to support the event firing on all browsers that support it.</p> <p><strong>Update:</strong></p> <p>Per the comment left by Duck: you use jQuery's <code>.one()</code> method to ensure the handler only fires once. For example:</p> <pre><code>$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... }); $("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... }); </code></pre> <p><strong>Update 2:</strong></p> <p>jQuery <code>bind()</code> method has been deprecated, and <code>on()</code> method is preferred as of <code>jQuery 1.7</code>. <a href="http://api.jquery.com/bind/" rel="noreferrer"><code>bind()</code></a></p> <p>You can also use <code>off()</code> method on the callback function to ensure it will be fired only once. Here is an example which is equivalent to using <code>one()</code> method:</p> <pre><code>$("#someSelector") .on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e){ // do something here $(this).off(e); }); </code></pre> <p>References:</p> <ul> <li><p><a href="https://api.jquery.com/off/" rel="noreferrer"><code>.off()</code></a></p></li> <li><p><a href="http://api.jquery.com/one/" rel="noreferrer"><code>.one()</code></a></p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload