jquery - 使用 jQuery 渐进式加载元素

Question

有没有办法逐步加载项目，并且每个项目之间有短暂的延迟？

例如，我有 5 个元素，我希望将它们淡入(使用 CSS3 过渡和 opacity)，但我希望它们一个接一个地加载。

这是一个 JS fiddle :https://jsfiddle.net/ndmbr1wk/

选择每个 jQuery 项并将其上的 .css() 函数延迟 1 秒的最佳方法是什么？

以下代码显然将 CSS 一次性应用于所有 .diamond 项目，但我不确定将其逐个应用于每个项目的最简单方法，而无需输入 5 个不同的类名例如.diamond-1

$("p").click(function() {
$('.diamond').each(function() {
  $( this ).delay('1000').css('opacity','1');
});

Answer 1

将 css 更改为 animate，使用 0 作为持续时间，这样就不会干扰 CSS 转换。

然后您可以使用 jQuery 的 delay 功能:

$('p').click(function() {
  $('.diamond').each(function(idx) {
    $(this).delay(idx*1000).animate({'opacity': '1'}, 0);
  });
}).click();

Fiddle