jquery - 使用 jQuery.when 淡入/淡出多个元素

Question

我有一对元素需要同时开始淡出/淡入。也就是说，一对中的两个元素只能在淡出完成后才开始淡入；并在淡入完成后淡出。

我基本上在一对元素上使用 $.when 来实现淡入和淡出。基本上，要等到褪色完成。它是否正确？还有什么比这个解决方案更简单吗？

完整代码:jsFiddle

$.when($('.next-' + id).fadeOut(500)).done(function () {
  var n = ...
  $.when($('.next-' + n).fadeIn(500)).done(function () {
    ...
  });
});

此外，.fadeOut() 返回一个 jQuery 对象。我们如何将它传递到需要 Deferred 对象的 $.when 中？帮忙？

Answer 1

您可以利用 jQuery 的一项功能，通过该功能，动画 jQuery 集合将使用 .promise() 返回“完成 promise ”:

我认为这就是您想要实现的目标:

$('.next-' + id).fadeOut(500).promise().then(function() {
    var n = ...;
    return $('.next-' + n).fadeIn(500).promise();
}).then(function() {
    ...
});

请注意，通过以这种方式构建 .then() 链，我们可以避免出现“pyramid of doom ”。

如果您使用自定义动画队列，事情会变得有点棘手，但对于标准 fx 队列(如本例所示)，一切都会变得非常简单。