Разная длительность анимаций (jQuery animate duration)

124

25 октября 2019, 20:40

Я использую анимированный счетчик, аналогичный этому https://codepen.io/SvetlanaIO/pen/vPBQRy

Мне нужно сделать так, чтобы в зависимости от получаемого числа (из html-атрибута data-count) была разная скорость счетчика.

Ниже я примерно написал как может выглядеть функция в duration, но c return у меня ничего не получилось. Подскажите, как правильно передать значение в duration в зависимости от условия и чтобы оно применилось?

  $(this).prop('Counter', 0).animate({
        Counter: $(this).attr('data-count')
    }, {
            duration: function () {
                if ($(this).attr('data-count') <= 5) {
                    return 4000;
                } else {
                    return 1000;
                }
            },
            easing: 'swing',
            step: function () {
            },
            complete: function () {
            }
        });

Answer 1

duration должен быть числом или строкой, а сейчас вы передаете туда код функции.

В зависимости от условия можно задать так: duration: условие ? если_верно : если_неверно

либо передавать вызов функции, а не её код

duration: function () {
  if ($(this).attr('data-count') <= 5) {
    return 4000;
  } else {
    return 1000;
  }
}(),

$('.counter').each(function() { 
 
  var $this = $(this), 
      countTo = $this.attr('data-count'); 
 
  $({ countNum: $this.text()}).animate({ 
    countNum: countTo 
  }, 
  { 
    duration: countTo > 150 ? 1000 : 5000, 
    easing:'linear', 
    step: function() { 
      $this.text(Math.floor(this.countNum)); 
    }, 
    complete: function() { 
      $this.text(this.countNum); 
    } 
  });   
   
});

body { 
  background-color: #F46A6A; 
  color:#fff; 
  max-width:800px; 
  margin: 0 auto; 
  text-align: center; 
  display: table; 
} 
 
.counter { 
  display: table-cell; 
  margin:1.5%; 
  font-size:50px; 
  background-color: #FF6F6F; 
  width:200px; 
  border-radius: 50%; 
  height:200px; 
  vertical-align: middle; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="counter" data-count="150">0</div> 
<div class="counter" data-count="85">0</div> 
<div class="counter" data-count="2200">0</div>