javascript - jQuery/Javascript:WAITING动画完成

首先，我要说我是Java语言的新手，而不是编程的人。我像这样的jQuery对象上调用fadeOut：

$(x).fadeOut('fast');

我还有其他东西会逐渐淡出，但是我需要它们彼此等待，我不一定知道有多少人会这样做。 x是来自数组的字符串，其中包含正在淡入或淡出的项。在第一次尝试中，我在fadeOut中使用了回调函数，如下所示：

$(x).fadeOut('fast', function(){ foo(modifiedArray); })

其中foo是我想要的方法，modifiedArray是减去x的数组。但这仍然没有让它等待，因此接下来我尝试了：

$(x).fadeOut('fast');
while( $(x).css('display') != 'none' ){}
foo(modifiedArray);

但是循环永远不会结束。如何在再次调用foo(modifiedArray)之前等待动画？

编辑：这是完整的代码

function animateElements(elements){
if (elements.length == 1){
    var x = elements[0];
    $(x).fadeIn('slow');
}
else{
    var x = elements.pop();
    $(x).fadeOut('fast');
    while(  $(x).css('display') != 'none' ){}
    animateElements(elements);
}
}

最佳答案

为了完整性。在您的代码中，您可以修复以下问题。


使用.fadeIn()代替.fadeOut()。

$(x).fadeIn('slow');
  ---^---

您可能要使用.shift()而不是.pop()从左到右而不是从右到左遍历数组。

var x = elements.pop();
              ---^---

在.fadeOut()的完整回调中调用递归步骤，以避免强制检查元素的样式。

$(x).fadeOut('fast');
  ---^---
while(  $(x).css('display') != 'none' ){}
animateElements(elements);

使用elements.length == 0作为基本案例。这将提高可读性。

if (elements.length == 1) {
  --^--

最后，代码将如下所示：

function animateElements(elements) {
  if (elements.length) {
    var x = elements.shift();
    $(x).fadeOut('fast', function(){
      animateElements(elements);
    });
  }
}

See it live。

关于javascript - jQuery/Javascript:WAITING动画完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13590089/