我需要在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();
});
};
答案 0 :(得分:1)
因为动画easing的默认设置为swing
。将其设置为linear
答案 1 :(得分:1)
我对width: 120px
进行了一些更改以用于演示目的
$('#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')
};