我想加载三个图像,每个都有一个动画淡入淡出延迟,我想要淡入淡出所有,与他们各自的延迟,然后隐藏。然后再次淡入然后重复。 动画流示例: 1淡入此搜索延迟= 0 /图像2延迟= 0.5秒/图像3延迟= 1 /秒 2.隐藏上2S 这里是我做了1.5s的 3.重复淡入所有三个图像,我正在玩setInterval中的add和remove类。jquery循环动画淡入
$(".tri1").inViewport(function(px) {
if (px > 0) {
fadeAdd();
setInterval(function() {
fadeAdd();
}, 5500);
setInterval(function() {
fadeRemove();
$(".tri1").css('opacity', '0');
$(".tri2").css('opacity', '0');
$(".tri3").css('opacity', '0');
}, 5400);
}
});
function fadeAdd() {
$(".tri1").addClass("fadeIn");
$(".tri2").addClass("fadeIn");
$(".tri3").addClass("fadeIn");
}
function fadeRemove() {
$(".tri1").removeClass("fadeIn");
$(".tri2").removeClass("fadeIn");
$(".tri3").removeClass("fadeIn");
}
.tri2{
animation-delay: 0.5s;
}
.tri3{
animation-delay: 1s;
}
<div class="pointer">
<img class="tri1 animated" src="res/img/sec4/tri1.png" alt="" />
<img class="tri2 animated" src="res/img/sec4/tri2.png" alt="" />
<img class="tri3 animated" src="res/img/sec4/tri3.png" alt="" />
</div>
谢谢!这是我想到的想法,我已经尝试过,但我的代码并不那么干净。多谢兄弟! –