循環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函數

回答

相關問題