Question

我使用jQuery创建了一个小动画（面板上升并下降）。但我无法让它成为一个循环。所以它会继续这样做。这是迄今为止的代码：

$(document).ready(function() {

    startAni();   

});

function startAni() {
    setTimeout(function() {
        $('.ani .panels').animate({
            top: '-350px',
        }, 2500, function() {
            setTimeout(function() {
                $('.ani .panels').animate({
                    top: '0px',
                }, 2500, function() {
                });
            }, 1000);
        });
    }, 1000);


    //startAni();
}

所以它完美地工作一次（面板div上升，在那里停留1秒然后又回来了。如何将其更改为循环？我尝试在函数内部调用相同的函数但是刚刚杀死它：/

谢谢！

Answer 1

var time = 1000; //time between loops
$(document).ready(function() {

    var interval = setInterval('startAni()',time);   

});

Answer 2

此示例有效：

http://jsbin.com/esaraj/4/edit#javascript,html,live

  function startAni() {
            $('.ani .panels').animate
            (
            {top: '250px'}, 2500, function(){
setTimeout(   
              function() {                                                            $('.ani .panels').animate
(
{top: '0px'}, 2500, function() 
{
startAni();
}
);},2500);});}


          $(function()
  {

    startAni();   

}

Answer 3

你应该使用setInterval并重写你的功能，如：

$(document).ready(function() {

   //interval = 2500ms + 2500ms = sum of all animation steps
   var interval = 5000;
   var looping = setInterval(startAni, interval); 
   startAni(); //starts animation right away
});

function startAni() {
     $('.ani .panels').animate({
            top: '-350px',
        }, 2500, function() {
            $('.ani .panels').animate({
                top: '0px',
            }, 2500);
        }
    });
}

原始功能的变化未在prev答案中提及，所以我决定另外写一个

UPD：如果".ani .panels"中有多个项目，则应使用以下内容：

$(document).ready(function() {
   //interval = 2500ms + 2500ms = sum of all animation steps
   var interval = 5000;
   var looping = setInterval(startAni, interval);  
   startAni(); 
});

function startAni() {

    var animating = false;
    $('.ani .panels').animate({
            top: '+50px',
        }, 2500, function() {
             // the callback tries to run for every item in '.ani .panels'
             // we need it to run only once
             if(!animating){
                animating = true;
                $('.ani .panels').animate({
                   top: '0px',
               }, 2500, function() { 
                  // reset flag for a single callback instance invocation
                  animating=false; 
               });
           }
       }
   );

}

the working fiddle

Answer 4

这里是带有html代码的自动循环功能。我希望这可能对某人有用。

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div>
<script>

function test() {
$(".block").animate({left: "+=50", opacity: 1}, 500 );
   setTimeout(mycode, 2000);
};
$( "#go" ).click(function(){
test();
});
</script>
</body>
</html>

小提琴： DEMO

循环jQuery函数

4 个答案: