2

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

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

完整代码：jsFiddle

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

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

4

2 回答 2

3

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

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

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

请注意，通过以这种方式构建.then()链条，我们避免了“厄运金字塔”。

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

于 2013-07-22T19:27:57.920 回答
1

有更简单的方法。只需使用.delay(x)See my answer to this question jQuery Add then remove width to continuous elements in a loop and your updated fiddle 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);
于 2013-07-22T20:36:38.190 回答