使用 jQuery.when 淡入/淡出多个元素答案

【问题标题】：Fade In / Out Multiple Elements Using jQuery.when使用 jQuery.when 淡入/淡出多个元素
【发布时间】：2013-07-20 17:19:15
【问题描述】：

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

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

完整代码：jsFiddle

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

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

【问题讨论】：

你可以看类似jsfiddle.net/arunpjohny/mGzLm/2
感谢@ArunPJohny，但这并不能保证.fadeIn() 仅在.fadeOut() 完成后才会发生。例如，尝试设置... fadeOut(50 * 1000).promise(), ... .fadeIn(0.8 * 1000).promise(), ...，即淡出真长，淡入真短。

标签： jquery jquery-animate jquery-deferred promise

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

有更简单的方法。只需使用.delay(x) 看看我对这个问题的回答jQuery Add then remove width to consecutive elements in a loop 和你更新的小提琴http://jsfiddle.net/RruxA/1/

var MAX = 2;

var animateCard = function (id) {

  setInterval(function () {        
    var n = (id % MAX) + 1
    $('.next-' + id).fadeOut(500)
    $('.next-' + n).delay(500).fadeIn(800)
    id = n                          
  }, MAX * 1300);
}

animateCard(1);

【讨论】：