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.