我怎么能修复动画速度？

时间：2017-03-07 13:14:43

标签： javascript jquery css animation

我有以下代码（请参阅下面的代码）。它工作但我有以下问题。向下滚动并开始动画时，完成动画需要很长时间（大约4秒）。换句话说，它开始非常慢。

我试图从JS和CSS转换中删除“慢”，但我没有运气，进度条动画停止工作或者他们继续做动画非常慢。

代码背后的想法是，当你向下滚动动画时，它应该具有正常的速度。

我该如何解决这个错误？

由于

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var IsViewed = false;

$(document).scroll(function() {


  $(".progress div").each(function() {
    var display = $(this),
      currentValue = parseInt(display.text()),
      nextValue = $(this).attr("data-values"),
      diff = nextValue - currentValue,
      step = (0 < diff ? 1 : -1);
    if (nextValue == "0") {
      $(display).css("padding", "0");
    } else {
      $(display).css("color", "#fff").animate({
        "width": nextValue + "%"
      }, "slow");
    }


  });
});
.progress-bar {
  background-color: #53dceb;
  height: 12px;
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div style="background-color: #f5f5f5">
    <div class="container">
      <div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
        <div class="col-12">
          <h3>Skills</h3>
          <hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">

          <div id="pbar" class="row">
            <!--Skills-block-1-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill1-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
                <div id="test" class="progress">
                  <div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
                  </div>
                </div>
              </div>
              <!-- Skill2-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
                <div class="progress">
                  <div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill3-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill5-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
            </div>

            <!--Skills-block-2-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill10-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill11-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
                <div class="progress">
                  <div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill12-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill13-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
            </div>

            <!--Skills-block-3-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill19-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill20-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
                <div class="progress">
                  <div data-values="40" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill21-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
                <div class="progress">
                  <div data-values="50" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill22-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar"></div>
                </div>
              </div>
            </div>
          </div>
</body>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

2 个答案:

答案 0 :(得分：1)

您在每个滚动事件上绑定动画 - 您需要在再次制作动画之前检查它是否已经动画：

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var IsViewed = false;

$(document).scroll(function() { // this code is run everytime you scroll
  console.log('scrolling');     // scroll a little bit and see how many times this is logged - that is how many times you run the code below

  $(".progress div").each(function() {
    var display = $(this),
      currentValue = parseInt(display.text()),
      nextValue = $(this).attr("data-values"),
      diff = nextValue - currentValue,
      step = (0 < diff ? 1 : -1);
      
    if (!display.is(':animated')) {                 // this checks to see if you are currently animating - if you are, you do not want to start the animation again (otherwise you get that slow start you were seeing)
      if (nextValue == "0") {
        $(display).css("padding", "0");
      } else {
        $(display).css("color", "#fff").animate({
          "width": nextValue + "%"
        }, "fast");
      }
    }

  });
});
.progress-bar {
  background-color: #53dceb;
  height: 12px;
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div style="background-color: #f5f5f5">
    <div class="container">
      <div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
        <div class="col-12">
          <h3>Skills</h3>
          <hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">

          <div id="pbar" class="row">
            <!--Skills-block-1-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill1-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
                <div id="test" class="progress">
                  <div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
                  </div>
                </div>
              </div>
              <!-- Skill2-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
                <div class="progress">
                  <div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill3-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill5-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
            </div>

            <!--Skills-block-2-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill10-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill11-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
                <div class="progress">
                  <div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill12-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill13-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
            </div>

            <!--Skills-block-3-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill19-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill20-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
                <div class="progress">
                  <div data-values="40" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill21-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
                <div class="progress">
                  <div data-values="50" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill22-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar"></div>
                </div>
              </div>
            </div>
          </div>
</body>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

答案 1 :(得分：0)

在开始新动画之前，您需要致电.stop()（或finish()）：

$(display).css("color", "#fff").stop().animate({ ...

＆＃13;
＆＃13; 
function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var IsViewed = false;

$(document).scroll(function() {


  $(".progress div").each(function() {
    var display = $(this),
      currentValue = parseInt(display.text()),
      nextValue = $(this).attr("data-values"),
      diff = nextValue - currentValue,
      step = (0 < diff ? 1 : -1);
    if (nextValue == "0") {
      $(display).css("padding", "0");
    } else {
      $(display).css("color", "#fff").stop().animate({
        "width": nextValue + "%"
      }, "slow");
    }
  });
  
});
＆＃13; 
.progress-bar {
  background-color: #53dceb;
  height: 12px;
  -webkit-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}
＆＃13; 
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div style="background-color: #f5f5f5">
    <div class="container">
      <div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
        <div class="col-12">
          <h3>Skills</h3>
          <hr style=" padding-bottom: 1.5rem" class="hr-dashes-yellow">

          <div id="pbar" class="row">
            <!--Skills-block-1-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill1-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number1 <span class="pull-right">30%</span></h5>
                <div id="test" class="progress">
                  <div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
                  </div>
                </div>
              </div>
              <!-- Skill2-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number2 <span class="pull-right">100%</span></h5>
                <div class="progress">
                  <div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill3-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number3 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill5-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number4 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
            </div>

            <!--Skills-block-2-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill10-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number5 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill11-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number6 <span class="pull-right">70%</span></h5>
                <div class="progress">
                  <div data-values="70" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill12-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number7 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
              <!-- Skill13-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number8 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
                </div>
              </div>
            </div>

            <!--Skills-block-3-->
            <div class="col-lg-4 col-md-6 col-sm-4">
              <!-- Skill19-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666"> Number9 <span class="pull-right">90%</span></h5>
                <div class="progress">
                  <div data-values="90" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill20-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number10 <span class="pull-right">40%</span></h5>
                <div class="progress">
                  <div data-values="40" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill21-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">Number11 <span class="pull-right">50%</span></h5>
                <div class="progress">
                  <div data-values="50" class="progress-bar"></div>
                </div>
              </div>
              <!-- Skill22-->
              <div style="margin-bottom: 2rem">
                <h5 style="color: #666">number12 <span class="pull-right">60%</span></h5>
                <div class="progress">
                  <div data-values="60" class="progress-bar"></div>
                </div>
              </div>
            </div>
          </div>
</body>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

正如Pete所说，你用每个小卷轴创建一个新动画，然后排队。当您删除transition时，这一点就变得很明显了（我的浏览器默认情况下默认有一个简短的动画）。

相关问题
最新问题