几个动画延迟对他们不起作用

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>