jQuery.animate(), кажется, принимает параметр длительности как задержку

Question

У меня самая страшная проблема в том, что моя анимация работает с jQuery. Моя цель - анимировать 5%width Загрузочный лот .progress-bar до 100%width.

Мой код:

HTML

<div class="box"> 
    <div class="box-header"> 
     Box title 
     <span class="pull-right"> 
      <a class="btn btn-default" data-id="2" rel="tooltip" title="Remove"> 
       <i class="fa fa-times"></i> 
      </a> 
     </span> 
    </div> 
    <div class="progress"> 
      <div class="progress-bar progress-bar-danger progress-2 progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 5%;"></div> 
    </div> 
    <div class="box-content">Long content here...</div> 
</div> 

JQuery

jQuery(function($) { 
    $('.btn').on('click', function() { 
     var id = $(this).data('id'); 
     $('.progress-'+id).animate({width: '100%'}, 5000, 'linear'); 
    }); 
}); 

Что ожидается: имея .progress-bar медленно увеличьте его width с 5% до 100%.

Что я на самом деле получаю: jQuery, кажется, принимает параметр duration как задержку. На клик он ждет, а затем быстро запускает анимацию не линейным способом. Иногда он начинает анимацию сразу, но все же не линейно.

Есть ли что-то, что мне не хватает? Что-то не так с моим браузером (Chromium v.42)? Он также не работает на Firefox. Однако Opera не испытывает никаких проблем.

Спасибо, что помогли мне.

(not so) working JSFiddle

Answer 1

.progress-bar { transition: width 0.6s ease 0s; } декларация в bootstrap.min.css препятствует JQuery. Удалите это, и он будет работать нормально. В качестве альтернативы вы можете попробовать this пример, который использует переход CSS:

JS

$('.btn').on('click', function() { 
    var id = $(this).data('id'); 
    $('.progress-'+id).addClass('progress-bar-full');  
}); 

CSS

.progress-bar { 
    transition: width 5s linear; 
    width: 5%; 
} 
.progress-bar-full { 
    width: 100%; 
} 

Answer 2

Вопрос заключается в том, как самозагрузка обрабатывает переходы. Переопределите поведение по умолчанию со своим, как показано ниже.

.progress-bar { 
    -webkit-transition: none !important; 
    transition: none !important; 
} 

https://jsfiddle.net/mjr5xbqw/10/