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

Question

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

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

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

Answer 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()所以这里有一个更新的解决方案：

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

演示