計數器是沒有得到使用步驟選項

我用.animate()功能，並且所述步驟選項每秒使用.animate（）函數降低。

當0秒剩餘時它變爲0，但數字沒有每秒遞減！

function timeRunner() { 
    $("#TimeIndicator").animate({ 
     width: "0px" 
    }, { 
     duration: 90000, 
     step: function (now) { 
      var percent = (Math.round(now)/136) * 100; 
      var timeleft = (percent) * (0.9); 

      $("#TimeIndicator").html(Math.round(timeleft)); 

     }, 
     complete: function() { 
      timerReset(); 
     } 
    }) 
}; 

function timerReset() { 
    $("#TimeIndicator").animate({ 
     width: "136px" 
    }, 0, function() { 
     timeRunner(); 
    }); 
};

來源

2013-11-25 Vignesh Subramanian

因爲默認設置動畫的easing是swing。將它設置爲linear

來源

2013-11-25 06:05:45 epascarello

所以我應該怎麼改變它，每秒鐘都會減少計數器？！你可以請更新小提琴，這將是非常有益的 –

這裏是小提琴的鏈接，以防萬一你錯過了它的問題 http://jsfiddle.net/vigneshvdm/bz8rC/3/ –

我看到它，思想你可以想出如何添加該選項，因爲你知道如何爲持續時間等其他人做這件事。將'easing'設置爲'linear' – epascarello

我已經做了一些更改width: 120px用於演示目的

DEMO

$('#TimeIndicator').text('12') 


var t = setInterval(function() { 

if (!parseInt($('#TimeIndicator').width(), 10) == 0) timeRunner(); 
else { 
    $('#TimeIndicator').text('') 
    window.clearInterval(t) 
} 

}, 1000); 


function timeRunner() { 

$('#TimeIndicator').animate({ 
    width: '-=10px' 
}, function() { 
    $(this).text(parseInt($(this).text(), 10) - 1) 
}) 
};

編輯爲-1px per secondDEMO

$('#TimeIndicator').text('120') 


var t = setInterval(function() { 

if (!parseInt($('#TimeIndicator').width(), 10) == 0) 
{ 
    timeRunner(); 

    setTimeout(function(){ 
       $('#TimeIndicator').text(parseInt($('#TimeIndicator').text(), 10) - 1) 
       },100) 
} 
else { 
    $('#TimeIndicator').text('') 
    window.clearInterval(t) 
} 

}, 1000); 




function timeRunner() { 

$('#TimeIndicator').animate({ 
    width: '-=1px' 
},'linear') 
};

來源

2013-11-25 06:17:15 UDB

謝謝UDB！ :)我已upvoted –

計數器是沒有得到使用步驟選項

回答

相關問題