使用步骤选项使用.animate（）函数，计数器每秒都不会减少

Question

我需要在90秒内制作动画

我使用了.animate()函数和步骤选项。

当剩下0秒时它变为0但是数字没有每秒递减!!

请参阅this fiddle

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();
    });
};

Answer 1

因为动画easing的默认设置为swing。将其设置为linear

Answer 2

我对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 second DEMO

的

编辑

$('#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')
};