12

如果这是一个明显的问题，请原谅我。

我在页面上有未知数量的元素，我需要一次循环一个并做一些事情。但是，我需要暂停循环，直到元素上使用的函数完成，然后继续进行下一次迭代。

我尝试在 $.each 循环中执行此操作，但它会快速触发命令并完成，而无需等待它们完成。

有任何想法吗？

$('elem').each(function(){
    $(this).fadeIn().wait(5000).fadeOut();
});

这就是我所拥有的，非常简单。我从这里得到了 wait() 函数：jquery cookbook site。

问题是，循环不会等待 - 实际命令按预期工作，只是它们都立即关闭。

任何帮助表示赞赏，谢谢。

编辑：执行此操作后，我可能想再次执行循环，以便元素列表将按顺序再次淡入/淡出

EDIT2：已经获得了 1.4.2 jQuery 库，使用的是 1.3.2，因此使用了自定义 wait() 函数。现在使用 lobstrosity 提到的 delay() 。设法从他的回答中拼凑出一些接近我需要的东西，谢谢 lobstrosity :)。

4

4 回答 4

9

首先，jQuery 1.4 添加了延迟功能，我认为这是您的自定义等待实现正在做的事情。

使用延迟，您可以通过使用每个回调的第一个参数作为初始延迟的乘数来伪造每个元素“等待”前一个元素完成的功能。像这样：

var duration = 5000;

$('elem').each(function(n) {
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});

所以第一个元素会立即淡入。第二个将在 5,000 毫秒后淡入。10,000 毫秒后的第三个，依此类推。请记住，这是伪造的。每个元素实际上并不是在等待前一个元素完成。

于 2010-03-03T15:16:55.237 回答
3

您的主循环 usingeach()将在您的元素集合上立即运行。您需要将这些元素排队。

这可能需要调整（并且可能使用 jQuery 队列？），但要演示使用递归来处理队列：

function animate(elems) {
    var elem = elems.shift();
    $(elem).fadeIn().wait(5000).fadeOut(2000, function() {
        if (elems.length) {
            animate(elems);
        }
    });
}

var elems = $('elem');
animate(elems);
于 2010-03-03T15:13:02.943 回答
0

您可能需要在第一个函数之前调用 wait ：

  $(this).wait().fadeIn().wait(5000).fadeOut();

另一种选择是使用回调。

 $(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')});

这样，在fadeIn 完成之前，fadeOut 不会开始。

于 2010-03-03T15:07:43.800 回答
0

这是我的解决方案的演示。

您需要的不是处理处理的循环。你想要的是链接调用。似乎可能有一种更简单的方法，但这是一种蛮力方法。

// Create a function that does the chaining.
function fadeNext(x,y) {
  return function() { x.fadeIn(100).delay(100).fadeOut(1000, (y?y.fadeNext:y)); };
}

// Get all the elements to fade in reverse order.
var elements = [];
$('.f').each(function(i,e) {elements.unshift(e);});

// Iterate over the elements and configure a fadeNext for each.
var next;
for (var i in elements) {
  var e = $(elements[i]);
  e.fadeNext = fadeNext(e,next);
  next = e;
}

// Start the fade.
next.fadeNext();
于 2010-03-03T17:21:05.100 回答