jQuery無盡動畫

我正在製作一個無窮無盡的jquery動畫，它繪製6個div並通過強制交換它們。（最好看看鏈接） divs的位置被保存在一個數組中，每個循環中，它的元素被交換一個位置。動畫已經準備就緒，我的問題是，我真的不知道如何在無限循環中調用它。jQuery無盡動畫

Here是要使用的代碼。

Here是動畫查看全屏。

thx任何幫助;

HTML：

<head> </head> 

<body> 

<style> 

div { background-color: #3f3; } 

</style> 

<div style="position:absolute" class="block-flex-4" id="block-video-4"> 
ELEMENT1 
</div> 


<div style="position:absolute" class="block-flex-5 block-flex" id="block-video-5"> 
ELEMENT2 
</div> 

<div style="position:absolute" class="block-flex-6 block-flex" id="block-video-6"> 
ELEMENT3       
</div> 

<div style="position:absolute" class="block-flex-3 block-flex" id="block-video-3"> 
ELEMENT4       
</div> 

<div style="position:absolute" class="block-flex-2 block-flex" id="block-video-2"> 
ELEMENT5       
</div> 

<div style="position:absolute" class="block-flex-1 block-flex" id="block-video-1"> 
ELEMENT6      
</div> 


</body>

JS：

try{ 
    var arrayFlexRotation = new Array(
    [110, 93, 38, 119, 1], 
    [177, 153, 172, 190, 1], 
    [83, 70, 412, 217, 0.35], 
    [194, 168, 201, 0, 1], 
    [167, 145, 424, 10, 1], 
    [141, 123, 553, 175, 0.8] 
); 

    var doAnim = function(elt, eltWidth, eltHeight, eltLeft, eltTop, eltFontSize){ 

    jQuery(elt).wait().animate({ 
    width: eltWidth + "px", 
    height: eltHeight + "px", 
    left: eltLeft + "px", 
    top: eltTop + "px", 
    fontSize: eltFontSize + "em" 
    }, 5000,null,null); 

} 

     jQuery.fn.wait = function(time, type) { 
     time = time || 500; 
     type = type || "fx"; 
     return this.queue(type, function() { 
      var self = this; 
      setTimeout(function() { 
       $(self).dequeue(); 
      }, time); 
     }); 
    }; 


     function runit(){ 
    var temp = arrayFlexRotation[0]; 
    arrayFlexRotation[0] = arrayFlexRotation[1]; 
    arrayFlexRotation[1] = arrayFlexRotation[2]; 
    arrayFlexRotation[2] = arrayFlexRotation[5]; 
    arrayFlexRotation[5] = arrayFlexRotation[4]; 
    arrayFlexRotation[4] = arrayFlexRotation[3]; 
    arrayFlexRotation[3] = temp; 



    //animate position 
    for(i=0; i<6; i++) 
    { 
doAnim(jQuery("#block-video-" + (i+1)), arrayFlexRotation[i][0], arrayFlexRotation[i][3], arrayFlexRotation[i][2], arrayFlexRotation[i][3], arrayFlexRotation[i][4]); 
    } 


} 
runit(); 
runit(); 
runit(); 
//and so on 

} 
    catch(e) 
    { 
    alert(e); 
    }

來源

2011-07-19 dilbert

的動畫（）函數具有完整的參數，該函數調用一次在動畫完成。猜測你可以在完整的參數中傳遞你的anim函數，這樣當它完成每次迭代時它會不斷調用它自己。

來源

2011-07-19 10:25:23

這正是我最初想要的，但同時還有6個動畫（每格移動1個）在6個動畫之後，整個過程應該重新開始。所以不是動畫函數應該運行在endloss循環中，而是runit（）函數 – dilbert

好吧，現在我可以設法讓它工作，使用animate函數的回調，它在初始階段並沒有工作，因爲firebug殺死了瀏覽器出於任何原因。 – dilbert

確定我發現與jquery-定時器清潔溶液demo of the code below

$（文件）。就緒（函數（）{

 $("#ball_holder").everyTime(3000, function(){      
     $("#ball_holder").animate({top:"184px"}, 400).animate({top:"0px"}, 370); 
     });

這裏的3000是的間隔函數以毫秒爲單位。希望這可以幫助

來源

2011-07-19 10:31:21 maniacneron

嗯你是否嘗試過現場示例？因爲這對我沒有幫助 – dilbert

jQuery無盡動畫

回答

相關問題