Is there a way to smoothly animate my progress bar when I hover over the parent div? I have tried setting the width to "90%", but it animates multiple times if I hover over the parent div more than once. Using pixel units fixes this issue, but it is not responsive when zooming in or out. How can I make sure the animation only occurs once on hover?
My goal is to achieve the same effect as shown in the snippet below, where the progress bar animates to 90% when hovered over, but without the repeat animations when hovering repeatedly.
$(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>