Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
}
like image 254
user830593 Avatar asked Jul 20 '11 19:07

user830593


People also ask

What is looped animation?

Looping an animation causes it to repeat. You can loop animations in Advanced mode. Each element's animation can be looped separately, or you can loop a more complex animation involving multiple elements.

Which method is available in jQuery for animation?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

How can use animation in jQuery?

jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);


1 Answers

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.

like image 68
CassOnMars Avatar answered Oct 13 '22 20:10

CassOnMars