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:

Answer 1

Following should work.

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

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

<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

Answer 6

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