如何仅使用一次 jquery 和百分比单位为进度条设置动画？

Question

我正在尝试为我的“HTML 级别”进度条制作动画。当我悬停父级 div 时，我希望进度条达到“90%”。我发现的最好方法是设置“宽度：90%”。但是，例如，当我将父级 div 悬停两次时，进度条会再动画一次。我试过使用“px”单位，它起作用了，但它没有响应，如果我们缩放，我们永远不会得到相同的结果。请问我该如何解决这个问题？

PS：我希望我的代码能像下面的“片段”一样工作，但是当我在浏览器中一次又一次地将它悬停时，它会多次动画化

$(document).ready(function () {
    $("#langages").on('mouseenter', function () { 
        $("#fr").animate({ width: "90%" });
    });
});

#langages{
  height: 100px;
}

#fr {
  width: 20%;
}

.size {
  max-height: 25em;
}

.bgBlue{
    background-color: #5DD5FF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="langages" class="bg-white col-10 text-center mx-                   auto mb-5 fs-5 shadow rounded size">
  <div class="col-11 mx-auto my-4 text-start">
    Français
    <div class="progress mt-1">
      <div class="progress-bar bgBlue" id="fr" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">90% Complete</span>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以在动画完成时添加class，并在mouseenter事件时检查元素是否得到class。像这样，动画运行只有一次。

$(document).ready(function () {
    $("#langages").on('mouseenter', function () { 
      // we check if animation was done once
      if (!$("#fr").hasClass('animationDone')) {
        // if not, then we do animation
        $("#fr").animate({
          width: "90%"
        }, 500, function() {
          // we add class animationDone once 
          $("#fr").addClass('animationDone');
          console.log('Animate once');
        });
      }
    });
});

#langages{
  height: 100px;
}

#fr {
  width: 20%;
}

.size {
  max-height: 25em;
}

.bgBlue{
    background-color: #5DD5FF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="langages" class="bg-white col-10 text-center mx-                   auto mb-5 fs-5 shadow rounded size">
  <div class="col-11 mx-auto my-4 text-start">
    Français
    <div class="progress mt-1">
      <div class="progress-bar bgBlue" id="fr" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">90% Complete</span>
      </div>
    </div>
  </div>
</div>

Answer 2

响应的最佳方式之一是使用 vw。当然你可以定义变量，获取 screen.width 并进行一些数学运算。

  $("#fr").animate({ width: "90vw" });

  $(document).ready(function () {
    let userScreenWidth =String(screen.width);
    userScreenWidth = userScreenWidth.substring(0, 2) * 90;
    // console.log(userScreenWidth.substring(0, 2) * 90);
  $("#langages").on('mouseenter', function () { 
      $("#fr").animate({ width:userScreenWidth+'px' });
  });
});

如何仅使用一次 jquery 和百分比单位为进度条设置动画？

How to animate a progress bar with jquery and percent unit just once?

html

javascript

css

jquery

jquery-animate