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如何处理转换。使用您自己的方式覆盖默认行为。

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

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

Answer 2

.progress-bar { transition: width 0.6s ease 0s; }中的bootstrap.min.css声明会干扰jQuery。删除它，它会正常工作。或者，您可以尝试使用css转换的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%;
}

jQuery.animate（）似乎将duration参数作为延迟

2 个答案: