// we are already wrapped within DomReady handler's closure var circle1 = $('.c1'), circle2 = $('.c2'), animate1 = function () { circle1.animate({ top: "+=10" }, 1000); }, animate2 = function () { if (animate2running) return; animate2running = true; circle2.animate({ top: "+=10" }, 1000, function () { animate2running = false; }); }, animate2running = false; $('#run1').bind('click', animate1); $('#run2').bind('click', animate2);
<button id="run1">Run awesome animation</button> <button id="run2">Run awesome animation (prevent queuing the code)</button> <div class="circle c1"></div> <div class="circle c2"></div>
.circle { border-radius:10px; height:20px; width:20px; background:green; position:absolute; top:30px; left:130px; } .c2 { left:160px; background-color:red; }