jQuery多个方法等待

Question

有没有办法在循环中等待隐藏功能？我的意思是如果我在html中有这个结构:

<div class='example'>
    <span> One </span>
    <span> Two </span>
    <span> Three </span>
<div>

在js我想做这样的事情:

$('.example span').each(function(i, span) {
    $(span).hide('slow');
});

我相信js是异步的所以它不会等待hide结束,但也许有一种我不知道等待隐藏动画结束并继续下一个元素的方法？

Answer 1

您可以使用.delay()它在正确的时间运行它们,如下所示:

$('.example span').each(function(i, span) {
  $(span).delay(600 * i).hide('slow');
});

你可以在这里尝试一下

我们在这里做的就是延迟下一个动画600ms("慢"持续时间)乘以它的索引,所以第一个动画立即开始(从0开始,0*600 = 0),第二个在600ms开始(第一个应该完成然后),第三次在1200ms等