幾個動畫延遲對他們不起作用

Question

我想在同一個元素上做幾個動畫，但是，其中一個我需要它有一個延遲，但它不工作。以下是代碼。

$('#hey').animate({ 
 
    'margin-top': '100px', 
 
}, {queue: false, duration: 1500, complete: function(){ 
 
    // alert('hey'); 
 
}}); 
 

 
$('#hey').animate({ 
 
    'margin-left': '100px', 
 
}, {queue: false, duration: 1000}); 
 

 
$('#hey').delay(5000).animate({ // <-- this delay 
 
    'height': '190px', 
 
}, {queue: false, duration: 2000});

#hey { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="hey"></div>

Answer 1

每jquery delay文檔，延遲功能的工作原理上的動畫隊列。它看起來像你需要設置queue: true爲了延遲做任何事情：

$('#hey').animate({ 
 
    'margin-top': '100px', 
 
}, {queue: false, duration: 1500, complete: function(){ 
 
    // alert('hey'); 
 
}}); 
 

 
$('#hey').animate({ 
 
    'margin-left': '100px', 
 
}, {queue: false, duration: 1000}); 
 

 
$('#hey').delay(5000).animate({ 
 
    'height': '190px', 
 
}, {queue: true, duration: 2000});

#hey { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="hey"></div>