StackOverflow Question: jQuery Queue

http://stackoverflow.com/questions/25451180/jquery-queue-not-working

HTML

<h3>Steps:</h3>
<ul id="steps">
    <li>clear the html on a block</li>
    <li>insert a single div</li>
    <li>fade in background color</li>
    <li>pause for 3 seconds</li>
    <li>fade it out</li>
    <li>return to the previous html</li>
</ul>
<br />
<div id="mock-body"><h4>click to start</h4></div>

CSS

body { font-family: sans-serif; }
div#mock-body {
    background-color:#eee;
    margin:8px;
    padding:1em;
    text-align:center;
}

JavaScript

var $body = $('div#mock-body');
var $newDiv = $('<div />').html('<h4>new block</h4>').hide();

$body.on('click', function() {
  $body
    .queue(function() {
      highlightStep(1);
      $body.children().fadeOut(1000, function(){ $body.dequeue(); });  
    })
    .queue(function() {
      highlightStep(2);
      alert(2);
      $body.append($newDiv);
      $newDiv.fadeIn(1000, function(){ $body.dequeue(); });
    })
    .queue(function() {
      highlightStep(3);
      alert(4);
      $newDiv.animate({backgroundColor: "red"}, 1500, function(){ $body.dequeue(); });
    })
    .queue(function() {
      highlightStep(4);
      var stopAt = Date.now() + 3000;
      var interval = setInterval(function() {
        var timeLeft = stopAt - Date.now();
        if ( timeLeft < 0 ) {
          $newDiv.find('h4').text('new block');
          clearInterval(interval);
          $body.dequeue();
        }
        else {
          $newDiv.find('h4').text(
            'Continue in ' + (timeLeft/1000).toFixed(2) + ' seconds.');
        }
      }, 150);
    })
    .queue(function() {
      highlightStep(5);
      $newDiv.fadeOut(1500, function(){ $body.dequeue(); });
    })
    .queue(function() {
      highlightStep(6);
      $newDiv.css({backgroundColor: 'transparent'}).detach();
      $body.find('h4:eq(0)').fadeIn(1000, function(){ $body.dequeue(); });
    });
});

function highlightStep(n) {
    $('ul#steps li').css({
        'font-weight': 'normal',
        'color': '#333'
    });
    $('ul#steps li:nth-child('+n+')').css({
        'font-weight': 'bold',
        'color': 'blue'
    });
}

// Versions
// Deferreds: http://jsfiddle.net/klenwell/wg4jqdjs/2/
// Queue: http://jsfiddle.net/klenwell/wg4jqdjs/3/