div class在加载页面时淡入淡出

Question

我希望在页面加载时使不同的类淡入淡出。

请参阅this web page。

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

我想在不同延迟的方格中淡入淡出。我发现了几篇关于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')); 
    } 
)