 <p>You can use <a href="http://api.jquery.com/clearQueue/" rel="nofollow"><strong><code>clearQueue()</code></strong></a> to stop the animation</p> <blockquote> <p>clearQueue() : Stop the remaining functions in the queue</p> </blockquote> <p><kbd><a href="http://jsfiddle.net/b4hwq/3/" rel="nofollow">jsFiddle here</a></kbd></p> <p><strong>HTML</strong></p> <pre><code>&lt;div class="box"&gt;&lt;/div&gt; &lt;button id="restartTransition"&gt;Click Me&lt;/button&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.box{ opacity: 0.8; position: absolute; left: 0; top: 5%; background: #505060; border-radius: 1px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); margin: -16px 0 0 -16px; width: 32px; height: 32px; z-index: 2; } </code></pre> <p><strong>jQuery</strong></p> <pre><code>$(document).ready(function(){ $("#restartTransition").on("click", function(){ $('.box').clearQueue().transition({ x: '0px' },10); $('.box').transition({ x: '350px' },5000); }); }); </code></pre>