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

Posted 2023-05-08

【中文标题】jQuery.animate() 似乎将持续时间参数作为延迟 [重复]

【英文标题】：jQuery.animate() seems to take duration parameter as a delay [duplicate]

【发布时间】：2015-07-24 20:37:46

【问题描述】：

我在让我的动画与 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

【问题讨论】：

***.com/a/23575165/1654265

【参考方案1】：

问题在于引导程序如何处理转换。用你自己的覆盖默认行为，如下所示。

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

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

【参考方案2】：

bootstrap.min.css 中的 .progress-bar transition: width 0.6s ease 0s; 声明会干扰 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%;

【讨论】：

Removing 有点矫枉过正。只需覆盖它