jquery - 如何排队一系列css属性更改答案

【问题标题】：jquery - how to queue up a series of css property changesjquery - 如何排队一系列css属性更改
【发布时间】：2012-06-15 16:56:31
【问题描述】：

我想设置一系列动画属性 - 当前不可见但将标记为可见的名称列表，一个接一个，彼此之间设置延迟约 100 毫秒。如何使用 jquery 完成此操作？本质上，它会是这样的（伪代码）：

for each $(.item) {
$(this).delay(index*100ms).css({'visibility': 'visible'}
}

唯一可能使这种情况更加复杂的事情是，虽然大多数元素都具有相同的类，但并非所有元素都具有相同的类，因此某种类型的动画队列效果最好。

【问题讨论】：

等等，你不想把一个东西放到多个项目上，还是把多个东西放到一个上？

标签： javascript jquery css delay jquery-animate

【解决方案1】：

您可以使用.delay() 来执行此操作。

$('#foo').slideUp(300).delay(800).fadeIn(400);

执行此语句时，元素向上滑动 300 毫秒，然后暂停 800 毫秒，然后淡入 400 毫秒。

你实际上想对多个项目做一件事，所以我会这样做：

$.each($(".a"), function(index, value) {
    $(this).delay(index*400).fadeOut(400);
});

您的伪代码走在了正确的轨道上，您需要将每个动画偏移index * someTime。

事实证明，.delay() 实际上不适用于css()，所以here's 是一个更新的解决方案：

$.each($(".a"), function(index, value) {
    $(this).delay(index*400).queue( function(next){ 
        $(this).css('visibility','visible'); 
        next(); 
      });
});

demo

【讨论】：

谢谢，但这将发生在一系列不同的元素上，而不是对同一元素的不同更改。
啊，是的，这就是我不确定的。我会在几秒钟内更新我的答案。