遞增遞減間隔

試圖創建一個變得越來越慢的加載欄。我已經做到了，所以每增加一點寬度都會逐漸變小，但現在我想對區間值做同樣的處理。截至目前，我的變量「itime」被設置爲1000，並且每一步都不會減慢。我究竟做錯了什麼？遞增遞減間隔

var itime = 1000; 

var progress = setInterval(function(){ 

    var insidewidth = $('#inside').width(); 

    if (insidewidth > 388) { 
     $("body").css("background","blue"); 
     clearInterval(progress); 
    } 
    else { 
     $("#inside").width($("#inside").width() + (175/insidewidth)); 
     itime += 1000; 
    }; 


}, itime);

來源

2013-10-01 Dustin Locke

的Jquery已經提供了 - 只需使用'animate（）'和一個適當的緩動函數。 – georg

一旦間隔設置完畢，您不能改變它。使用超時和遞歸來代替：

var itime = 1000; 

function progress(){ 
    setTimeout(function() { 
     var insidewidth = $('#inside').width(); 

     if (insidewidth > 388) { 
      $("body").css("background","blue"); 
     } else { 
      $("#inside").width(insidewidth + (175/insidewidth)); 
      itime += 1000; 
      progress(); 
     } 

    }, itime); 
}

來源

2013-10-01 21:58:41 adeneo

嘗試了此解決方案，但動畫未啓動。加載欄永遠不會。 –

當你正在使用jQuery，你可能需要使用easing functions，特別是easeOutExpo例如可以適合您的用例

$("#inside").animate({ width: bar_width }, duration:5000, easing: 'easeOutExpo'});

如果需要的話您可以提供custom easing function

來源

2013-10-01 22:36:35

任何方式來動畫每一步之間的時間雖然？所以需要一秒鐘，然後兩秒鐘等等？ –

這裏是另一種方式來做到這一點，不反覆涉及設置定時器：

$(function() { 
    var nMax = 99; 
    var nWidth = 0; 
    var nSpeed = 100; 

    var $progressBar = $('.progress-bar div'); 

    var oInterval = window.setInterval(function() { 
     nWidth += (nMax - nWidth)/100; 

     $progressBar.stop().animate({ 
      width: nWidth + '%' 
     }, nSpeed); 

     if(Math.round(nWidth) === nMax) window.clearInterval(oInterval); 
    }, nSpeed); 
});

Fiddle example

來源

2013-10-01 23:45:31 anarchocurious

是否做這項工作，但客戶要求酒吧移動，例如，一秒鐘後，二秒鐘後，三秒鐘後等等。想法？ –

遞增遞減間隔

回答

相關問題