Как сделать цикл бесконечного повторения jquery

Question

Я пытаюсь реализовать цикл jQuery infinte с изображениями внутри div. Я попытался сделать это с помощью функции 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/

Любые идеи?

Answer 1

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


}); 

Answer 2

Вставьте полную анимацию в функцию, а затем передайте эту функцию как обратный вызов последней анимации. Пример -

$(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?

Answer 3

Как только изображение затухает, вам нужно скрыть изображение, тогда оно будет работать. Пожалуйста, проверьте ниже скрипку

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

});

Answer 4

попробуйте использовать 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"> 
 
\t \t <img src="http://lorempixel.com/g/70/70/" alt=""> 
 
\t \t <img src="http://lorempixel.com/g/70/70/" alt=""> 
 
\t \t <img src="http://lorempixel.com/g/70/70/" alt=""> 
 
</div>