Question

我的应用程序中有一个简单的动画引导进度条，仅在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/

Answer 1

$('.bar').animate({width:'50%'});

这似乎运作正常但时间属性消失了：/！

但你仍然可以通过转换延迟来解决问题：）

注意： 我不确定，但我觉得如果animate函数中的时间值和transition-duration设置为相同的值

$('.bar').animate({width:'50%'},2000);

和css

transition-duration:2s

动画效果似乎正常：）

Answer 2

这似乎是关于使用百分比制作动画的jQuery错误。

它被引用为here但标记为1.7的固定 - 它再次出现在1.8.3中，因为在你的小提琴中将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)

我将搜索队列以确保报告尚未生效，如果没有，则本周提交一份报告。

Answer 3

这是因为如果你设置的值小于此值，你只能动画50%，那么你也会遇到铬到demo的问题，因为最后一个位置就是那个位置，你动画到75％ CSS3。

所以现在你在jQuery中100％的动画在css中将等于75％。然后你就不会遇到这个问题了。 demo

Firefox中奇怪的bootstrap进度条行为

3 个答案: