How can I loop an animation continuously in jQuery?

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

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.


Following should work.

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

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

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.