div类在加载时淡入页面

Question

我想让不同的类在页面加载时淡入。

请参阅此网页 。

如您在上面的链接中看到的，有许多正方形以不同的灰色阴影和一些颜色存在。

我想以不同的延迟淡入正方形。 我发现了几篇文章，并发表了有关ID标签褪色的文章，但没有文章在Class标签中褪色。 我可以通过ID来做到这一点，但这意味着要针对每个正方形，因为ID只能影响一个元素。

我想同时影响几个方块。

Answer 1

我建议使用数据属性，例如data-start-color="#CCCCCC" ， data-end-color ， data-over-time="100"和data-out-time 。

然后，您可以对所有正方形使用一个函数。 那样的东西（对不起，我没有在您的页面上对其进行检查）：

$('.square').hover(
  function() {
    $(this).stop().animate({ backgroundColor: $(this).data('end-color') }, $(this).data('over-time'));
  },
  function() {
    $(this).stop().animate({ backgroundColor: $(this).data('start-color') }, $(this).data('out-time'));
  }
)