jQuery的循環動畫

我有這些紙條，我需要循環：jQuery的循環動畫

$(document).ready(function() { 
    runIt(); 
}) 
function resets() 
{ 
    $('.grower').removeAttr("style"); 
} 

function runIt() 
    { 
     $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets); 
    }

但是當我加入runIt（）;它內部自我循環，它循環但我的瀏覽器變爲空白，我不會迴應。我怎麼能這樣做，所以它會循環該動畫。

在此先感謝

來源

2012-08-01 Yair Villar

無需查詢DOM不斷。在一個變量存儲$('.grower')：

$(document).ready(function() { 
    var $grower = $('.grower'); 

    function runIt() { 
     $grower.animate({ 
      width: "30px", 
      height: '30px', 
      left: "-6", 
      top: "-6", 
      opacity:"0" 
     }, 800, function() { 
      $grower.removeAttr("style"); 
      runIt(); 
     }); 
    } 

    runIt(); 
});

這裏的小提琴：http://jsfiddle.net/jC8Js/

更新：如果你想讓它每個週期前暫停使用：

setTimeout(runIt, 1000);

這裏是小提琴：http://jsfiddle.net/jC8Js/1/

或者，你可以只用一個interval timer運行所有的它：

$(document).ready(function() { 
    var $grower = $('.grower'); 

    setInterval(function() { 
     $grower.animate({ 
      width: "30px", 
      height: '30px', 
      left: "-6", 
      top: "-6", 
      opacity:"0" 
     }, 800, function() { 
      $grower.removeAttr("style"); 
     }); 
    }, 1500); 
});

這裏的小提琴：http://jsfiddle.net/jC8Js/2/

來源

2012-08-01 17:15:46

@YairVillar - 我在每次循環後添加了一些代碼以暫停它。 – 2012-08-01 17:33:27

不錯的工作，thx！ – Lukas 2012-08-30 08:01:15

This： 'function runIt（）{... runIt（）; }' 可能導致堆棧溢出，因爲沒有停止條件。直到許多「迭代」纔會顯示，但在IE9上使用jQuery transition（）（而不是animate（））時，我遇到了一個類似的問題，它不支持css轉換。該次通話是立即進行的，該堆疊快速運行。我認爲這種循環方法並不完全是這個循環應該如何完成的。 – kuonirat 2015-07-14 08:26:28

http://jsfiddle.net/nUVbb/

$(document).ready(function() { 
    runIt(); 
}) 
function resets() 
{ 
    $('.grower').removeAttr("style"); 
    runIt(); 
} 
function runIt() 
{ 
    $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets); 
}

來源

2012-08-01 17:11:03 Tallboy

我怎麼給它，它每次循環後的時間？ – 2012-08-01 17:24:15

在.animate（）之前添加.delay（500） – Tallboy 2012-08-01 19:03:17

jQuery的循環動畫

回答

相關問題