Question

我有成对的元素需要同时开始淡出/淡出。也就是说，当淡出完成时，一对中的两个元素都应该开始淡入;在淡入完成时淡出。

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

完整代码：jsFiddle

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

此外，.fadeOut()返回一个jQuery对象。我们如何将它传递给期望延迟对象的$.when？帮助

Answer 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队列（如本例所示），一切都变得非常简单。

Answer 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);

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

2 个答案: