Debunking .delay（）

Question

this questionへのMattの回答を参照してください。彼は.delay()はほとんどの人に混乱し、彼は次の例を与えることを言う：

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

はフィドルのためhereを参照してください。誰かがそのコード行の動作を説明できますか？のみjQueryのコードの特定の部分が.delay()とオフにプッシュすることができ

Answer 1

から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(); 
    });