我希望在页面加载时淡入淡出。
正如您在上面的链接中看到的那样,有许多不同深浅的灰色和一些颜色的正方形。
我想以不同的延迟淡化广场。我发现了几篇文章并发布了ID标签的淡入淡出但没有在Class标签中淡出。我可以通过ID来实现,但这意味着要定位每个方格,因为ID只能影响一个元素。
我想在时间影响几个方格。
答案 0 :(得分:0)
我建议使用数据属性,例如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'));
}
)