循环jQuery函数

我有用jQuery制作的小动画（面板上升和下降）。但是我无法让它成为一个循环。所以它会继续下去。这里是到目前为止的代码：循环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秒，然后回来下来我怎样才能在循环改变这个我试过调用同一个功能？里面的功能，但只是把它打死了：/

感谢

来源

2012-01-10 user995317

使用[setInterval的]（http://www.w3schools.com/jsref/met_win_setinterval.asp）。 – Sjoerd 2012-01-10 15:29:56

这个例子的工作原理：

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

}

来源

2012-01-10 16:10:33 netadictos

得到它与这个和一些修改工作。谢谢！ – user995317 2012-01-11 09:16:33

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

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

});

来源

2012-01-10 15:30:42

这不会做任何事......嗯。也许我错过了一些东西。 – user995317 2012-01-11 08:40:14

您正在使用startAni（）函数，对不对？你能提供任何链接吗？ – 2012-01-11 09:32:18

你应该使用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); 
     } 
    }); 
}

个

原FUNC的变化上一个答案均未提及，所以我决定写一个单独的一个

UPD：

$(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; 
       }); 
      } 
     } 
    );

：如果您在 ".ani .panels"有一个以上的项目则应该喜欢的东西去

}

the working fiddle

来源

2012-01-10 15:59:38 akoptsov

这些作品差不多，但面板应停止在顶部和底部一秒。因此，我原来的超时。 – user995317 2012-01-11 07:58:10

这里的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

来源

2013-02-19 13:01:32 Selvamani

循环jQuery函数

回答

相关问题