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参数作为延迟。单击它等待，然后以非线性方式快速运行动画。有时，它会立即启动动画，但仍然不会以线性的方式启动。

我遗漏了什么吗？我的浏览器(Chromiumv.42)有什么问题吗？它在Firefox上也不起作用。不过，歌剧似乎没什么问题。

谢谢你帮我。

(不是这样)工作JSFiddle

Answer 1

.progress-bar { transition: width 0.6s ease 0s; }声明在bootstrap.min.css中干扰jQuery。把它移开，它就能正常工作。或者，您可以尝试使用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/