2011-04-04 105 views
0

我嘗試使用下面的代碼來創建一個continuely animatationjQuery - 如何設置寬度在增加?

var running = function() { 
    w = jQuery('#belt').width(); 
    if(w >= 940) 
    jQuery('#belt').width(0); 

    jQuery('#belt').animate({width: '+=235px'}, duration, 'linear'); 
} 

jQuery(document).everyTime(duration, running); 

但它不工作,寬度沒有得到恢復,但continuely增加,我有沒有寫錯?

+0

如果真的要使用每次,你需要讓你的第一個參數字符串,那就是:'$(文件).everyTime (「5s」,function(i){},0);' – diEcho 2011-04-04 12:07:21

+0

@diEcho,通過這種方式,我的動畫現在被重置。但是出現了一個新問題,那就是動畫現在有什麼突然停止的地方? – Edward 2011-04-04 12:14:19

+0

增加持續時間,以及使用'線性'需要什麼? – diEcho 2011-04-04 12:17:57

回答

1

您可以簡單地使用the complete parameter for jQuery#animate()定義動畫完成時應執行的函數。添加一些遞歸等瞧:

jQuery.fn.continuousAnimation = function() { 
    var $this = this; 
    return $this.animate({ 'width': '+=235px' }, 400, 'linear', function() { 
    $this.width(0).continuousAnimation(); 
    }); 
}; 

jQuery('#belt').continuousAnimation(); 

演示:http://jsfiddle.net/mathias/dRpgv/

+0

它就像一個魅力!非常感謝! – Edward 2011-04-04 14:19:20

0

duration的值是多少?

最好使用

的setInterval(函數(){// 刷新列表},5000)

其中所述第二參數是毫秒數。在每次

注意

如果真的要使用每次,你需要讓你的第一個參數字符串,那就是:

的$(document).everyTime(」 5s「, 函數(i){},0);

沒有這樣的必要使用「線性」 如果動畫突然停止然後檢查檢查duration,增加動畫時間或使用slow

jQuery的(「#帶」)。動畫({寬度的: '+ = 235px'},'slow');

+0

持續時間被設置爲'1s',並且突然停止似乎是因爲animate()不與'1s'一起工作;我現在將持續時間更改爲'3s',並將動畫編碼爲動畫()以動畫(..,3000,..),然後寬度不會再次被重置... – Edward 2011-04-04 12:39:32

+1

@Edward寬度將在3000 ms後重置。 btw不要爲animate和everytime設置相同的值,'everytime()'持續時間將大於'animate()'持續時間 – diEcho 2011-04-04 12:48:01

+0

使每次持續時間大於動畫持續時間的作品,似乎jQuery需要一些時間來執行寬度重置,但此方法還添加動畫之間的間隔,我試圖使用3000反對2990,它在Chrome中工作,而在Firefox中失敗。與3000對2900,在Firefox的作​​品也不平滑,我想它不會在低性能的計算機上工作 – Edward 2011-04-04 13:00:43