How can I loop an animation continuously in jQuery?

Question

I need to know how to infinitely loop this animation. It is a text scroll animation and I need it to repeat after it's finished.

Here is the jQuery:

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        $(".boxtext").ready(function(){
            $(".boxtext").animate({bottom:"600px"},50000);
        });
    });
</script>

Here is the CSS for ".boxtext"

.boxtext {
    position:absolute;
    bottom:-300px;
    width:470px;
    height:310px;
    font-size:25px;
    font-family:trajan pro;
    color:white;
}

You might want to be careful using fonts that not everyone, and given the name, or even most won't have. — CassOnMars, Jul 20 '11 at 19:21
Check my answer http://stackoverflow.com/questions/14530718/jquery-restart-animation-after-it-stops/14530823#comment20264568_14530823 it's the same story. — M K, Jan 25 '13 at 22:51

CassOnMars · Answer 1 · 2011-07-21T15:18:41.357

14

Make it a function and have it call itself as a callback:

$(document).ready(function(){
    scroll();
}

function scroll() {
    $(".boxtext").css("bottom", "-300px");
    $(".boxtext").animate({bottom:"600px"}, 50000, scroll);
}

Keep in mind, this won't be very fluid.

EDIT: I wasn't thinking earlier. My mistake.

edited Jul 21 '11 at 15:18

answered Jul 20 '11 at 19:23

CassOnMars

6,153
2
32
47

But the second time nothing happens because it's already at 600px, or am I misunderstanding you? – pimvdb Jul 20 '11 at 19:25
Excellent! This is just the functionality I was in search of – veeTrain Jun 05 '12 at 20:01

score 4 · Answer 2 · answered Jul 20 '11 at 19:24

4

Following should work.

$(document).ready(function(){
    animateTheBox();
}); 

function animateTheBox() {
    $(".boxtext").animate({bottom:"600px"}, 50000, animateTheBox);
}

answered Jul 20 '11 at 19:24

Yiğit Yener

5,796
1
23
26

score 3 · Answer 3 · answered Dec 05 '12 at 10:11

3

probably the simplest solution.

var movement1 = function(speed){
  $(".mydiv").animate({"top": "100px"}, speed,function(){
      movement2(speed)
  });
}


var movement2 = function(speed){
  $(".mydiv").animate({"top": "120px"}, speed,function(){
      movement1(speed)
  });
}

  movement1(1000);

this is eventually call each other infinitely.

answered Dec 05 '12 at 10:11

saad arshad

259
1
10

1

until stack overflow, it's cyclic recursion – dev1223 Nov 10 '15 at 14:42

score 1 · Answer 4 · edited Nov 18 '14 at 23:05

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 

$(function () {    
        move();
        });
function move(){
     $(".boxtext").ready(function(){
     $(".boxtext").animate({bottom:"600px"},50000,function(){
         $(".boxtext").css({"bottom":0}, move););

 });move();
 });
 </script>

score 0 · Answer 5 · answered Oct 07 '15 at 09:32

Please try this for continuous loop animation on hover.

function loopl(){
    $('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl  );
    }    

function loopr(){
        $('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr  );
    }
    function stop(){
        $('.mCSB_container').stop();
    }
    $( "#left" ).hover(loopl, stop);
    $( "#right" ).hover(loopr, stop);

score 0 · Answer 6 · answered Nov 25 '15 at 14:56

0

yourloop = setInterval(function() {
  // tasks
}, timeInMilliseconds );

Enjoy!

answered Nov 25 '15 at 14:56

jantocv

21
2
3

score 0 · Answer 7 · answered May 16 '16 at 03:58

0

Use setInterval. This way you can repeat a function infinitely after a certain interval, such as every second.

answered May 16 '16 at 03:58

Headache

239
2
8

score 0 · Answer 8 · answered Sep 25 '16 at 17:13

<script type="text/javascript"> 
var e = document.getElementByClassName('boxtext')[0].style.bottom;
function reset(){
if(e === "599px"){e === 0 + "px"}
else{b += 1000}
}
setInterval(reset(),1);

$(document).ready(function(){
    $(".boxtext").ready(function(){
        $(".boxtext").animate({bottom:"600px"},b);
    });
});

</script>

idont no but i think should have used javascript

score -2 · Answer 9 · edited Jan 13 '13 at 12:11

-2

Like this:

<script>
$(document).ready(function()
{
    $(window).load(function()
    {
        var a="#bijin"
        var x=1000
        var y=1000

        for (var i=1 ; i<=100000 ; i++){
            $(a).slideUp(x).slideDown(y);  
        }
    });
});

</script>

Example: http://www.hpcreating.com/effect/jquery2/slide4.html

edited Jan 13 '13 at 12:11

SeinopSys

8,787
10
62
110

answered Jan 02 '13 at 07:31

uedaka

29
1

5

-1 You're launching immediately into a one-hundred-thousand iteration loop and queueing up one hundred thousand animations. This is wasteful to the extreme. – doppelgreener Mar 12 '13 at 01:38
Same as @dopplegreener said and it doesn't even continue infinitely but 100000 iterations. Heavy on the performance side and doesn't solve the problem. – Stephen Tvedt Oct 01 '15 at 20:56

How can I loop an animation continuously in jQuery?

9 Answers9

Linked

Related