Question

我试图在同一个元素上做几个动画，然而，在其中一个上我需要它有一个延迟，但它不起作用。以下是代码。

＆＃13;

$('#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});

＆＃13;

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

＆＃13;

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

＆＃13;

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>

几个动画延迟了他们不工作

1 个答案: