Question

我有一个函数可以动画div的宽度，以便在用户输入表单信息时模拟进度条。当输入的信息比动画更快时，它会在动画之间暂停，然后再次开始，使动画不稳定。

当用户在上一个字段的动画完成之前完成下一个表单字段的输入时，如何使动画更流畅？

HTML

<div id="container">
  <div class="stepProgress">
    <div id="currentProgress"></div>
  </div>
  <div class="formContainer">
    <input id="firstName" type="text" class="k-textbox progInput" placeholder="First Name" />
    <input id="lastName" type="text" class="k-textbox progInput" placeholder="Last Name" />
    <input id="userName" type="text" class="k-textbox progInput" placeholder="User Name" />
    <input id="userEmail" type="text" class="k-textbox progInput" placeholder="Email" />
  </div>
</div>

CSS

.stepProgress {
  height: 10px;
  width: 100%;
}

#currentProgress {
  width: 0px;
  height: 100%;
  background-color: #00BFF2;
}
#container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
.formContainer {
  margin-top: 20px;
}
input {
  display: block;
  margin: 10px;
}

JS

$(document).ready(function() {
  var inputCount = $('.progInput').length;
  function stepProgress() {
    inputFilled = 0;
    $('.progInput').each(function(i, e) {
      if ($(e).val()) inputFilled++;
    });
    var pct = (inputFilled / inputCount) * 100;
    $('#currentProgress').animate({
      width: pct + "%"
    }, 800);
    if (pct === 100) {
      $('#currentProgress').animate({
        backgroundColor: '#608341'
      });
    } else {
      $('#currentProgress').animate({
        backgroundColor: '#00BFF2',
      });
    }
  }
  $('.progInput').change(function() {
    stepProgress();
  });
});

的jsfiddle

https://jsfiddle.net/rsf6mzr1/

Answer 1

你可以像这样使用css过渡：

的CSS：

#currentProgress {
  width: 0px;
  height: 100%;
  background-color: #00BFF2;

  transition: width .8s;
}

脚本：

$(document).ready(function() {
  var inputCount = $('.progInput').length;
  function stepProgress() {
    inputFilled = 0;
    $('.progInput').each(function(i, e) {
      if ($(e).val()) inputFilled++;
    });
    var pct = (inputFilled / inputCount) * 100;
    $('#currentProgress').css('width', pct + "%");
    if (pct === 100) {
      $('#currentProgress').animate({
        backgroundColor: '#608341'
      });
    } else {
      $('#currentProgress').animate({
        backgroundColor: '#00BFF2',
      });
    }
  }
  $('.progInput').change(function() {
    stepProgress();
  });
});

使用此脚本，您只需更改宽度attr和css执行动画。

jQuery Animate中的不需要的延迟

1 个答案: