Firefox 中的 jQuery animate() Buggy [重复]答案

【问题标题】：jQuery animate() Buggy in Firefox [duplicate]Firefox 中的 jQuery animate() Buggy [重复]
【发布时间】：2014-05-19 02:51:33
【问题描述】：

我编写了一个简单的计时器应用程序，它会随着计时器的进行更改背景颜色，以直观的方式指示您离超时时间有多近。这似乎在 Chrome 中运行良好，但在 Firefox 中遇到严重问题。背景不是干净地滑过页面，而是闪烁和跳跃，直到它非常接近结尾，此时它的行为符合预期。

编辑：事实上，这个问题确实是 CSS 的问题。 JavaScript/jQuery 是正确的。

页面：andrewcombs13.com/myStuff/timer/

相关 JavaScript：

var sliderPercent = (window.time * 100 / window.timeSet);
if(sliderPercent > (window.lastSliderPercent + 75)) {
    $("#Slider").animate({right: sliderPercent.toString().concat("%")}, 750, "easeInOutCubic");
} else {
    $("#Slider").animate({right: sliderPercent.toString().concat("%")}, window.tickLength - 10, "linear");
}
window.lastSliderPercent = sliderPercent;

其中window.time是定时器的当前剩余时间，window.timeSet是定时器的初始值，window.tickLength是调用定时器进度的函数的频率，window.lastSliderPercent只在这里使用.

完整的源代码可以在这里找到：
HTML：查看源：andrewcombs13.com/myStuff/timer/
CSS：andrewcombs13.com/myStuff/timer/timer.css
JavaScript：andrewcombs13.com/myStuff/timer/timer.js

我的设置：
Windows 7 64 位
火狐 29.0.1
铬 34.0.1847.137 米

使用来自 Google CDN 的 jQuery 1.11.1 和 jQuery UI 1.10.4

【问题讨论】：

标签： javascript jquery css firefox

【解决方案1】：

查看 Firefox 如何更改值，似乎 Firefox 无法解析 right css 属性，因为 left:0px 分配给 #slider 而停止。从您的 CSS 中删除 left:0px 并添加 width:100% 似乎已经解决了这个问题。

【讨论】：

【解决方案2】：

不要使用animate，而是使用css。

$("#Slider").css({right: sliderPercent.toString().concat("%")});

这将解决您的问题。

【讨论】：