Firefox中奇怪的引导程序进度栏行为

我的应用程序中有一个简单的动画引导程序进度条，它在Firefox中的表现很奇怪。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％。

这使我疯狂，我不明白为什么它的行为是这样的。

SEE FIDDLE：http://jsfiddle.net/dv4Hd/12/

来源

2014-03-04 Yarin

@MageshKumaar小于什么？ – Yarin

设置进度条的宽度，而不是像素 –

看来，10％的作品。奇怪的。 –

这似乎是一个关于动画使用百分比的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)

我这个星期如果没有搜索队列，以确保报告尚未激活，并提交一个。

来源

2014-03-04 04:20:40

我已经确认像素正常工作，所以我现在使用它 - 感谢您研究错误和跟进 - 如果您从他们那里收到了更新，请更新我们 – Yarin

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

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

但你仍然可以用跃迁延迟:)得到它

注：我不知道，但我觉得如果在动画功能和过渡期的时间值设置为相同的值

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

，并在CSS

transition-duration:2s

的动画似乎正常工作:)

来源

2014-03-04 02:48:57

有趣的是，当持续时间被排除时，该错误不存在。应该有助于调试。 –

我有点困惑。该错误来自时间属性或什么？有趣。不是吗？ –

这是因为如果设置小于这个值，那么您的动画效果只有50%，因此您还会遇到问题，因为最后一个位置是该位置，并且您使用css3的动画效果为75％。

所以，现在你在jQuery中100％的动画会等于css中的75％。然后你就不会面临这个问题。 demo

来源

2014-03-04 03:19:28

抱歉不遵循您的逻辑或您提出的解决方案。你是说不可能动画到50％？ – Yarin

Firefox中奇怪的引导程序进度栏行为

回答

相关问题