[英]How to make jquery infinite repeat loop
I'm trying to implement a jQuery infinte loop with images inside a div. 我正在尝试使用div中的图像实现jQuery infinte循环。 I've tried to do it with setInterval function, but the thing is that the whole animation is starting with a 3 sec delay, and the thing I want to achive is that the animation repeat it self when it comes to the end after 3 sec.
我已经尝试用setInterval函数来做,但问题是整个动画以3秒的延迟开始,而我想要实现的是动画在3秒后结束时自我重复。 I also tried to do a callback function after the .fadeTo but it's just applying on the first image, not the whole animation.
我也尝试在.fadeTo之后做一个回调函数,但它只是应用于第一个图像,而不是整个动画。
Here is the code: 这是代码:
setInterval(function(){
$('#animation-text img').each(function(i) {
$(this).delay((i++) * 500).fadeTo(70, 1);
});
}, 3000);
And here is the jsfiddle: http://jsfiddle.net/cavoledeni/edo5vcnz/ 这里是jsfiddle: http : //jsfiddle.net/cavoledeni/edo5vcnz/
Any ideas? 有任何想法吗?
Once image fade in then you need to hide the image , then it will work . 一旦图像淡入,然后你需要隐藏图像,然后它将工作。 Please check the below fiddle
请检查以下小提琴
https://jsfiddle.net/Midhun52/zg40dgcs/ https://jsfiddle.net/Midhun52/zg40dgcs/
$(document).ready(function(){
var a=function(){
$('#animation-text img').each(function(i) {
$(this).delay((i++) * 100).fadeTo(900, 1);
});
}
var b=function(){
$('#animation-text img').each(function(i) {
$(this).hide()
});
}
setInterval(a, 5000);
setInterval(b, 8000);
}); });
function setIntervalAndExecute(fn, t) {
fn();
return (setInterval(fn, t));
}
$(document).ready(function () {
setIntervalAndExecute(function () {
var $this = $('#animation-text img');
$this.css({'opacity': 0});
$this.each(function (i) {
$(this).delay((i++) * 500).fadeTo(70, 1);
});
}, 3000);
});
Try this. 试试这个。 It launches right away and show's each image.
它立即启动并显示每个图像。 Once all the images are shown ( each function finished ), I change the
type
to 0. type
is another word for the opacity
. 一旦显示所有图像(每个功能完成),我将
type
更改为0. type
是opacity
另一个单词。 So next time around the images get hidden. 所以下次图像会被隐藏起来。
function setIntervalAndExecute(fn, t) {
fn();
return (setInterval(fn, t));
}
$(document).ready(function () {
var type = 1;
setIntervalAndExecute(function () {
$('#animation-text img').each(function (i) {
$(this).delay((i++) * 500).fadeTo(70, type);
});
type = (type + 1) % 2;
}, 3000);
});
try using fadeOut()
to erase images: 尝试使用
fadeOut()
擦除图像:
$(document).ready(function(){ setInterval(function(){ $('#animation-text img').each(function(i) { $(this).delay((i++) * 500).fadeTo(10,1); }); }, 3000); setInterval(function(){ $('#animation-text img').each(function(i) { $(this).delay((i++) * 500).fadeOut(10); }); }, 8000); });
#animation-text { width: 100%; font-size: 0; border: 1px solid red; } #animation-text img { opacity: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="animation-text"> <img src="http://lorempixel.com/g/70/70/" alt=""> <img src="http://lorempixel.com/g/70/70/" alt=""> <img src="http://lorempixel.com/g/70/70/" alt=""> </div>
Insert full animation into a function, then pass that function as the callback to the last animation. 将完整动画插入到函数中,然后将该函数作为回调传递给最后一个动画。 Example -
示例 -
$(document).ready(function() {
function animateDivers() {
$('#divers').animate({'margin-top':'90px'},6000).animate({'margin- top':'40px'},6000, animateDivers);
}
animateDivers();
});
More details you can find here - how to loop a jquery div animation? 你可以在这里找到更多细节 - 如何循环jquery div动画?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.