jquery列表浅入淡出显示
文章描述：
html数据列表浅入淡出效果
html
<div class="container">
<div class="loop">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>css
.container{ max-width:1200px; margin:0 auto; padding-left:25px; padding-right:25px; padding-top:100px; }
.loop .list li { margin-bottom: 10px; background: #fff; padding: 25px 15px; border-radius: 5px; position: relative; opacity:0; }
.loop .list li:hover{ box-shadow: 0 7px 16px 0 rgb(0 0 0 / 20%); transition:all .3s ease; }
.loop .list li.active{ animation:action 1s; opacity: 1; }
@keyframes action{
0%{ opacity: 0; }
20%{ opacity: 0.2; }
50%{ opacity: 0.5; }
80%{ opacity: 0.8; }
100%{ opacity: 1; }
}jquery
$(function(){
var mainNewsList = $(".list li");
$.each(mainNewsList, function(i,ele) {
var that = $(this);
setTimeout(function(){
that.addClass('active')
},250*i);
console.log(i);
});
})
发布时间：2022/02/15
发表评论