Jquery循环动画淡入
Jquery Loop Animation fadeIn
我正在尝试加载三张图片,每张图片都有一个动画淡入延迟,我想要的是将它们全部淡入,然后隐藏它们各自的延迟。然后再次淡入然后重复。
动画流程示例:
1. FadeIn image1 delay=0s /image2 delay=0.5s /image3 delay=1 /s
2. 在 1.5s 上隐藏所有三个图像
3. 在 2s 上重复 FadeIn
这是我所做的,我正在 setInterval.
中添加和删除 class
$(".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>
我建议您实现一个没有第三方要求的简单 javascript 代码。创建一个函数并将其用作 fadeOut 的回调,当元素淡出时将调用该函数。
你应该尝试这样的事情:
1) Javascript 代码
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go();
2) HTML 代码
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div id="main">
<div id="1" class="trip">Item1</div>
<div id="2" class="trip">Item2</div>
<div id="3" class="trip">Item3</div>
</div>
3) CSS 代码
.trip { display: none}
您可以使用不同的 jQuery 版本,详情请见:https://code.jquery.com/
您可以只使用 CSS 动画:
#img-container img{
border: 5px solid orange;
height: 100px;
width: 100px;
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: infinite;
}
#img-container img#pic1{
animation-name: fadeIn1;
}
#img-container img#pic2{
animation-name: fadeIn2;
}
#img-container img#pic3{
animation-name: fadeIn3;
}
@keyframes fadeIn1{
0%{ opacity: 0;}
12.5%{ opacity: 1;}
90%{ opacity: 1; }
100%{ opacity: 0; }
}
@keyframes fadeIn2{
0%{ opacity: 0;}
12.5%{ opacity: 0;}
25%{ opacity: 1;}
90%{ opacity: 1; }
100%{ opacity: 0; }
}
@keyframes fadeIn3{
0%{ opacity: 0;}
25%{ opacity: 0;}
37.5%{ opacity: 1;}
90%{ opacity: 1; }
100%{ opacity: 0; }
}
.as-console-wrapper{display: none!important;}
<div id="img-container">
<img id="pic1" src="http://lorempixel.com/100/100/people" alt="pic1" />
<img id="pic2" src="http://lorempixel.com/100/100/nature" alt="pic2" />
<img id="pic3" src="http://lorempixel.com/100/100/fashion" alt="pic3" />
</div>
我正在尝试加载三张图片,每张图片都有一个动画淡入延迟,我想要的是将它们全部淡入,然后隐藏它们各自的延迟。然后再次淡入然后重复。 动画流程示例: 1. FadeIn image1 delay=0s /image2 delay=0.5s /image3 delay=1 /s 2. 在 1.5s 上隐藏所有三个图像 3. 在 2s 上重复 FadeIn 这是我所做的,我正在 setInterval.
中添加和删除 class$(".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>
我建议您实现一个没有第三方要求的简单 javascript 代码。创建一个函数并将其用作 fadeOut 的回调,当元素淡出时将调用该函数。
你应该尝试这样的事情:
1) Javascript 代码
var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go();
2) HTML 代码
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div id="main">
<div id="1" class="trip">Item1</div>
<div id="2" class="trip">Item2</div>
<div id="3" class="trip">Item3</div>
</div>
3) CSS 代码
.trip { display: none}
您可以使用不同的 jQuery 版本,详情请见:https://code.jquery.com/
您可以只使用 CSS 动画:
#img-container img{
border: 5px solid orange;
height: 100px;
width: 100px;
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: infinite;
}
#img-container img#pic1{
animation-name: fadeIn1;
}
#img-container img#pic2{
animation-name: fadeIn2;
}
#img-container img#pic3{
animation-name: fadeIn3;
}
@keyframes fadeIn1{
0%{ opacity: 0;}
12.5%{ opacity: 1;}
90%{ opacity: 1; }
100%{ opacity: 0; }
}
@keyframes fadeIn2{
0%{ opacity: 0;}
12.5%{ opacity: 0;}
25%{ opacity: 1;}
90%{ opacity: 1; }
100%{ opacity: 0; }
}
@keyframes fadeIn3{
0%{ opacity: 0;}
25%{ opacity: 0;}
37.5%{ opacity: 1;}
90%{ opacity: 1; }
100%{ opacity: 0; }
}
.as-console-wrapper{display: none!important;}
<div id="img-container">
<img id="pic1" src="http://lorempixel.com/100/100/people" alt="pic1" />
<img id="pic2" src="http://lorempixel.com/100/100/nature" alt="pic2" />
<img id="pic3" src="http://lorempixel.com/100/100/fashion" alt="pic3" />
</div>