javascript - 几个延迟的动画不起作用

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>