jQuery.animate() 似乎将持续时间参数作为延迟

Question

我在使用 jQuery 制作动画时遇到了最大的麻烦。我的目标是将 5% width Bootstrap .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

bootstrap.min.css 中的 .progress-bar { transition: width 0.6s ease 0s; } 声明干扰了 jQuery。删除它，它将正常工作。或者，您可以尝试使用 css transition:

的 this 示例

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

问题在于 bootstrap 如何处理转换。用您自己的方式覆盖默认行为，如下所示。

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

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

jQuery.animate() 似乎将持续时间参数作为延迟

jQuery.animate() seems to take duration parameter as a delay

jquery

html

animation

jquery-animate