javascript - 使用回调在不同时间为同一元素设置动画

Question

一段时间以来我一直遇到一些问题。我正在努力使这项工作正常进行，但我测试了其中一项无效或无效的方面。在这种情况下，回调不起作用。我需要三个动画，其中一个带有回调，在同一元素上有不同的时间。

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

$('#hey').animate({
  'margin-top': '100px',
}, {queue: false, duration: 1500}, function() {
  alert('hey'); // <-- this doesn't work -->
});

$('#hey').animate({
  '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

使用 complete属性

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

另请注意，SO 不能替代您自己阅读文档