Debunking .delay（）

Question

請參閱Matt的回答this question。他說，.delay()是迷惑大多數人，他給出了下面的例子：

$('#foo').hide().delay(2000).slideDown().text('Hello!').delay(2000).hide();

的小提琴見here。有人可以解釋該行代碼的行爲嗎？

的jQuery的代碼

Answer 1

只有某些部分可以用.delay()被推離 - hide()和text()是不該組的一部分。

所以基本上代碼正在做的是（不是真的這樣做，這只是一個草圖）：

setTimeout(function(){ 
    $('#foo').slideDown(); 
}, 2000); 
$('#foo').hide().text('Hello!').hide(); 

所以這就是爲什麼slideDown()似乎最後發生。

Answer 2

delay在動畫隊列中放置了一個延遲（無效果動畫），所以它只會影響其他動畫。鏈接hide後delay不會延遲hide，它仍然會立即發生。

如果分割方法分爲影響因素一下子些，然後啓動動畫的方法，你得到這個代碼，不會是相同的：

$('#foo').hide().text('Hello!').hide(); // set text and hide twice 
$('#foo').delay(2000).slideDown().delay(2000); // wait, slide, wait and do nothing 

Answer 3

其行爲不端已經解釋原因。要獲得所需的行爲，請使用queue：

$('#foo') 
    .hide() 
    .delay(2000) 
    .slideDown() 
    .queue(function() { 
     $(this).text('Hello!').dequeue(); 
    }) 
    .delay(2000) 
    .queue(function() { 
     $(this).hide().dequeue(); 
    });