[英]How to make this animation repeat itself?
这个 animation 完全按照我想要的方式工作,但我是 JS/jQuery 新手,我不确定如何循环我的 animation 所以它会无限继续。 这里也是 CodePen 的链接。 提前致谢! https://codepen.io/summeropratt/pen/qBbVdpQ
HTML
<div class="body">
<div class="seven-flex-grid">
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
<div class="col child-seven">
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_location_on_48px-512.png" alt="">
</div>
</div>
</div>
CSS
.body{
max-width: 600px !important;
}
.seven-flex-grid {
display: flex;
z-index: 2;
position: relative;
max-width: 108rem;
}
.col {
flex: 1;
padding: 0px 24px;
width: 20px;
}
.col img {
width: 100%;
}
.child-seven {
opacity: 0;
transition: 1s;
}
JS
$(document).ready(function() {
var points = $(".child-seven");
var queue = $.Deferred().resolve(); // create an empty queue
points.get().forEach(function(li){
queue = queue.then(function(){
return $(li).animate({opacity: 100}, 1000).promise();
})
});
});
使用 CSS 关键帧和 jQuery 切换 class 进行无限循环。
$(document).ready(function() {
setInterval(function(){
// toggle class every 4 sec, total 1 loop + 500ms
$('.seven-flex-grid').toggleClass('animating');
setTimeout(function(){
// toggle class every 3.5 sec, 7 icon * 500ms
$('.seven-flex-grid').toggleClass('animating');
},3500);
},4000);
});
CodePen 链接https://codepen.io/azhkuro/pen/GRoOqoq
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.