CODEWITHSUNDEEP
javascriptjquerysetinterval
BadRequest
BadRequest

Reputation: 43

How to make jquery infinite repeat loop

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?

Upvotes: 4

Views: 2611

Answers (4)

kockburn
kockburn

Reputation: 17616

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

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


});

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

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>

Upvotes: 1

Midhun Murali
Midhun Murali

Reputation: 2151

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

});

Upvotes: 2

disp_name
disp_name

Reputation: 1488

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?

Upvotes: 0

Related Questions