如何使jquery无限重复循环答案

【问题标题】：How to make jquery infinite repeat loop如何使jquery无限重复循环
【发布时间】：2015-04-21 08:38:24
【问题描述】：

我正在尝试用 div 内的图像实现 jQuery 无限循环。我试过用 setInterval 函数来做，但问题是整个动画以 3 秒的延迟开始，而我想要实现的是动画在 3 秒后结束时自我重复.我还尝试在 .fadeTo 之后执行回调函数，但它只是应用于第一张图像，而不是整个动画。

代码如下：

setInterval(function(){
    $('#animation-text img').each(function(i) {
        $(this).delay((i++) * 500).fadeTo(70, 1);
    });
}, 3000);

这里是 jsfiddle：http://jsfiddle.net/cavoledeni/edo5vcnz/

有什么想法吗？

【问题讨论】：

标签： javascript jquery setinterval

【解决方案1】：

一旦图像淡入，您需要隐藏图像，然后它将起作用。请检查下面的小提琴

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);

});

【讨论】：

【解决方案2】：

更新： Demo 2

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);


});

Demo

试试这个。它会立即启动并显示每个图像。一旦显示所有图像（每个功能都完成），我将type 更改为0。type 是opacity 的另一个词。所以下次图像会被隐藏起来。

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);


});

【讨论】：

不是在重复动画吗？
你想继续添加新的图像，还是只是重复三个图像的动画？ @BadRequest
我只想在动画结束时重复动画
tnx 人。它正在重复，但你可以让它重新开始，而不是逐个图像淡出。 Tnx！

【解决方案3】：

尝试使用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>

【讨论】：

【解决方案4】：

将完整动画插入一个函数，然后将该函数作为回调传递给最后一个动画。示例 -

$(document).ready(function() {   
  function animateDivers() {
    $('#divers').animate({'margin-top':'90px'},6000).animate({'margin-  top':'40px'},6000, animateDivers); 
  }
  animateDivers();
});

您可以在这里找到更多详细信息 - how to loop a jquery div animation?

【讨论】：