I'm trying to implement a jQuery infinte loop with images inside a div. 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. I also tried to do a callback function after the .fadeTo but it's just applying on the first image, not the whole animation.
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/
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/
$(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);
});
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);
});
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
. 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:
$(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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.