«Медленная» скорость анимации не работает

Question

У меня есть анимация, но она всегда работает быстро, несмотря на «медленный», я тоже пробовал целые числа, но они все равно не влияют. Я протестировал похожую анимацию на других элементах, и они реагируют на медленный.

АНИМАЦИЯ

$('#customers_delete_link').click(function(){ 
    $('#customers_delete_link_anim').animate(
        {'width': '200px'},'slow', function() {
            $('#customers_delete_popup').fadeOut();
            hide_check_toolbar();
        }
    );
});

// HTML

        <div id="customers_delete_link_cont">
            <div id="customers_delete_link">Delete Prospects</div>
            <div id="customers_delete_link_anim"></div>
        </div>

Что я делаю не так здесь

Answer 1

Вы можете использовать {duration: 5000} вместо 'slow':

$('#customers_delete_link').click(function(){ 
   $('#customers_delete_link_anim').animate(
        {width: '200px'},{duration: 5000}, function() {
            $('#customers_delete_popup').fadeOut();
            hide_check_toolbar();
        }
    );
});`

Изменить значение длительности для изменения скорости

Answer 2

Вы можете использовать длительность анимации, тогда вы можете точно определить продолжительность анимации, а не просто говорить медленно.

проверьте следующий фрагмент:

var dur;

function animate(){
    $('.progress').stop();
    $('.progress').animate({width: '100%'},
    {
    	duration: dur,
      easing: 'linear',
    	queue: false,
      done: function(){
      	$(this).css({width: '0%'});
      }
    })
};

$('.slow').click(function(){
    dur = 5 * 1000;
    animate();
});

$('.fast').click(function(){
  	dur = 0.5 * 1000;
  	animate();
});

.progress {
  width: 0%;
  padding:10px;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="fast">fast</button>
<button class="slow">slow</button>

<div class="progress"></div>