我想让不同的类在页面加载时淡入。
请参阅此网页 。
如您在上面的链接中看到的,有许多正方形以不同的灰色阴影和一些颜色存在。
我想以不同的延迟淡入正方形。 我发现了几篇文章,并发表了有关ID标签褪色的文章,但没有文章在Class标签中褪色。 我可以通过ID来做到这一点,但这意味着要针对每个正方形,因为ID只能影响一个元素。
我想同时影响几个方块。
我建议使用数据属性,例如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'));
}
)