如何在jQuery中循环播放动画？

Question

我需要知道如何将这个动画无限循环。它是一个文本滚动动画，我需要在完成后重复它。

以下是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>  

这里是“.boxtext” CSS的代码

.boxtext {
    position:absolute;
    bottom:-300px;
    width:470px;
    height:310px;
    font-size:25px;
    font-family:trajan pro;
    color:white;
}

- user830593

---

使用不是每个人都有的字体时，你可能需要小心，尤其是使用名字奇特或大多数人没有的字体。 - CassOnMars

请检查我的答案：http://stackoverflow.com/questions/14530718/jquery-restart-animation-after-it-stops/14530823#comment20264568_14530823，这是同样的情况。 - M K

Answer 1

将其制作为函数，并使其调用自身作为回调：

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

function scroll() {
    $(".boxtext").css("bottom", "-300px");
    $(".boxtext").animate({bottom:"600px"}, 50000, scroll);
}

请注意，这不会非常流畅。

编辑：我之前没有考虑清楚。我犯了错误。

- CassOnMars

---

但第二次什么也不会发生，因为它已经在600像素处了，或者我误解了你的意思？ - pimvdb

太棒了！这正是我正在寻找的功能。 - veeTrain

Answer 2

以下应该可以正常工作。

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

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

- Yiğit Yener

Answer 3

可能是最简单的解决方案。

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

这将最终导致无限互相调用。

- saad arshad

---

直到堆栈溢出，它是循环递归。 - dev1223

Answer 4

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

- Felipe

Answer 5

请尝试使用此代码实现鼠标悬停时的连续循环动画。

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

- Ganpat Kakar

Answer 6

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

享受吧！

- jantocv

Answer 7

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

我不确定，但我认为应该使用JavaScript。

- UNKNOWN

Answer 8

使用setInterval。这样，您可以在一定的时间间隔后无限次重复一个函数，例如每秒钟执行一次。

- Headache

Answer 9

像这样：

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

示例：http://www.hpcreating.com/effect/jquery2/slide4.html

- uedaka

---

你立即开始了一个10万次的循环，并且排队了10万个动画。这是极其浪费资源的。 - doppelgreener

就像@dopplegreener所说的那样，它甚至不会无限循环，但只有100000次迭代。在性能方面非常耗费资源，而且并不能解决问题。 - Stephen Tvedt