CODEWITHSUNDEEP
javascriptjquery
user830593
user830593

Reputation: 221

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

Upvotes: 14

Views: 50772

Answers (9)

UNKNOWN
UNKNOWN

Reputation: 1

<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

Upvotes: 0

Headache
Headache

Reputation: 247

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

Upvotes: 0

jantocv
jantocv

Reputation: 21

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

Enjoy!

Upvotes: 0

Ganpat Kakar
Ganpat Kakar

Reputation: 163

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

Upvotes: 0

Felipe
Felipe

Reputation: 11

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

Upvotes: 1

uedaka
uedaka

Reputation: 31

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

Upvotes: -1

saad arshad
saad arshad

Reputation: 259

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.

Upvotes: 3

CassOnMars
CassOnMars

Reputation: 6181

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.

Upvotes: 14

Yiğit Yener
Yiğit Yener

Reputation: 5986

Following should work.

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

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

Upvotes: 4

Related Questions