Search code examples
javascriptjqueryqueuedelay

Chained delays/queues not working?

I'm trying to replace the contents of an element, a few seconds later do a few things, and then half a second after that put the original contents back. Here's my code:

HTML:

<div id="swap">original text</div>

JS:

var oldHtml = $("#swap").html();
$("#swap").html("new text").delay(2000).queue(function() {
    console.log('first queue');
    // do something cool
}).delay(500).queue(function() {
    console.log('second queue');
    $("#reportProblemFormContainer").html(oldHtml);
});

JSFIDDLE: http://jsfiddle.net/NDwG6/

The output is

first queue

Why isn't the second delay/que working? Is there a way to get this to work?

Solution

  • Call next() to dequeue the current task. Updated JSFiddle http://jsfiddle.net/NDwG6/1/