Question

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

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

这是一个JS小提琴：https://jsfiddle.net/ndmbr1wk/

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

以下代码显然会同时将CSS应用于所有.diamond个项目，但我不确定将这个项目一个接一个地应用于每个项目的最简单方法，而不是放入5个不同的类名，例如{{1 }}

.diamond-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

Answer 2

https://jsfiddle.net/BramVanroy/ndmbr1wk/10/

$("p").click(function() {
    $('.diamond').each(function(index) {
        setTimeout(function() {
            $(this).addClass("loaded");
        }, index * 1500);
    });        
});

然后在CSS中添加一个类：

.loaded {
    opacity: 1;
}

如果要一个接一个地加载，请确保超时等于CSS中的transition-duration。

你也可以像Rick建议的那样在jQuery中制作动画，但是这样你就不会利用CSS3的优点（例如硬件加速）。编辑：他编辑了他的答案，现在允许硬件加速。通过使用animate()，他可以使用delay()，并通过将其动画持续时间设置为0，确保使用CSS动画（和硬件加速）。整洁的解决方案！

使用jQuery逐步加载元素

2 个答案: