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中奇怪的引導程序進度欄行爲

回答

相關問題