Блог

Главная - Вопросы по программированию - Как анимировать индикатор выполнения с помощью jquery и единицы процента только один раз?

Как анимировать индикатор выполнения с помощью jquery и единицы процента только один раз?

#javascript #html #jquery #css #jquery-animate

Вопрос:

Я пытаюсь анимировать индикатор выполнения «Уровень 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>

Комментарии:

1. Привет, ты видел мой ответ ?

Ответ №1:

Вы можете добавить класс, когда анимация будет завершена, и проверить, получил ли элемент класс при событии mouseenter. Вот так анимация запускается только один раз.

 $(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>

Комментарии:

1. Большое вам спасибо The_Death_Raw !! это работает. У меня просто еще один вопрос, как я могу отключить его на небольших устройствах?

2. Добро пожаловать, вы можете озвучить мой ответ, если хотите 😉 Вы можете проверить ширину окна просмотра с помощью параметра Ширина окна = window.innerWidth; и добавить условие, например : если (ширина окна > 500) { }

Ответ №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' });
  });
});

Комментарии:

1. Спасибо, Мохаммад, но это все равно работает не так, как я хочу. я попробовал ваш код, но каждый раз, когда я просматриваю родительский div, индикатор выполнения анимируется, и я хочу анимировать его только один раз. может быть, есть другой способ анимировать индикатор выполнения при прокрутке до этой части ?

Метки: