Question

我正在制作带有进度条的计时器。它可以正常工作，但并不顺利。它开始不错，但逐渐变慢。

const defaultTiming = 12;
const added = $(window).width() / defaultTiming; 
 let timer = 1;
 let timerInterval = setInterval(function(){
 if(timer  === defaultTiming) {
    timer = 0;
    $("#animate").width(0);
  $("#animate").animate({width: '100%'}, defaultTiming * 1000, function () { $(this).removeAttr('style'); })
 }
 const width = $("#animate").width();
    $("#timer").text(timer);
  timer = timer + 1;
}, 1000);

$("#animate").animate({width: '100%'}, defaultTiming * 1000, function () { $(this).removeAttr('style'); })

Answer 1

这是我的解决方法

您需要添加缓动属性"linear"来使功能动起来。

您获得的动画缓慢是因为缓动的默认值为"swing"

有关更多信息，请参阅文档http://api.jquery.com/animate/

const defaultTiming = 12;
const added = $(window).width() / defaultTiming;
let timer = 1;
let timerInterval = setInterval(function() {
  if (timer === defaultTiming) {
    timer = 0;
    $("#animate").width(0);
    $("#animate").animate({
      width: '100%'
    }, defaultTiming * 1000, "linear", function() {// add easing property "linear", default is "swing"
      $(this).removeAttr('style');
    })
  }
  const width = $("#animate").width();
  $("#timer").text(timer);
  timer = timer + 1;
}, 1000);

$("#animate").animate({
  easing: 'linear',
  width: '100%'
}, defaultTiming * 1000, "linear", function() {// add easing property "linear", default is "swing"
  $(this).removeAttr('style');
})

div {
  width: 0;
  background: red;
  height: 10px;
}

.chand {
  width: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animate"></div>
<div id="timer"></div>

CSS中的进度条不流畅

1 个答案: