我的应用程序中有一个简单的动画 Bootstrap 进度条,它仅在 Firefox 中表现异常。
HTML:
<div id="render-progress" class="progress progress-striped active" >
<div class="bar" style="width: 25%; height:100%;background-color: #CCCCCC;"></div>
</div>
JS:
$('#render-progress .bar').animate({width:'50%'}, 2000);
在 Chrome 中,它从 25% 到 50%,但在 Firefox 中,它从 25% 到 75% 到 50%。
这让我抓狂,我不明白为什么会这样。
参见 fiddle : http://jsfiddle.net/dv4Hd/12/
最佳答案
这似乎是一个关于使用百分比制作动画的 jQuery 错误。
引用here但标记为 1.7 已修复 - 它会在 1.8.3 中重新出现,因为在你的 fiddle 中将 jQuery 版本更改为 1.6.4 或 1.7.2 将使它按预期工作。
此外,转换为像素按预期工作:http://jsfiddle.net/dv4Hd/24/
// Must include code when linking to fiddle
var $progressBar = $('#render-progress .bar');
var percentIncrease = 0.50;
var parentWidth = $('.progress').width();
var increasePx = parentWidth * percentIncrease;
$progressBar.animate({width:increasePx}, 2000)
我将搜索队列以确保报告尚未激活,如果没有,则在本周提交。
关于jquery - Firefox 中奇怪的 Bootstrap 进度条行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22161695/