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'));
  }
)

div类在加载页面中淡入淡出

1 个答案: