StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy does my jQuery queue stop working after executing once?
text
Body
copied!<p>Okay, so my goal is to make a simple animation where a domino moves from the front of a pile to the back, when it is clicked. </p> <p>I have something that works here: <a href="http://jsfiddle.net/Kirkman/tDmHE/" rel="nofollow">http://jsfiddle.net/Kirkman/tDmHE/</a></p> <p>But this consists of big series of nested callbacks, and eventually I will have a lot more than five dominoes. So then I learned that jQuery's queue could help me keep my code cleaner and not have to nest all those callbacks.</p> <p>Here's what I came up with. But it only works the first time you click: <a href="http://jsfiddle.net/Kirkman/R7TmU/8/" rel="nofollow">http://jsfiddle.net/Kirkman/R7TmU/8/</a></p> <p>What I cannot figure out is why it will not work subsequent times.</p> <p>Here are the relevant JS functions: </p> <pre><code> function dominoSlide(theThis) { $('#dominoes .nav ul li').removeClass('selected',500); var thisDomino = theThis.parent(); $('#dominoes .nav ul').queue(function() { thisDomino.switchClass('domino0','selected', 250); $('.domino1').switchClass('domino1','domino0',10); $('.domino2').switchClass('domino2','domino1',10); $('.domino3').switchClass('domino3','domino2',10); $('.domino4').switchClass('domino4','domino3',10); thisDomino.addClass('domino4'); thisDomino.removeClass('selected',250); resetHandlers(); }); } function resetHandlers() { $('#dominoes .nav ul li a').unbind(); $('.domino0 a').bind('click', function(event) { var theThis = $(this); dominoSlide(theThis); event.preventDefault(); }); $('#dominoes .nav ul li:not(".domino0") a').bind('click', function(event) { event.preventDefault(); }); } </code></pre>

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