jQuery animate() Firefox의 버기시

Question

저는 타이머가 진행됨에 따라 배경의 색상을 변경하는 간단한 타이머 응용 프로그램을 작성하여 시간이 얼마나 남았는지 시각적으로 보여줍니다. 이것은 Chrome에서 잘 작동하는 것으로 보이지만 Firefox에서 심각한 문제가 발생합니다. 페이지를 깨끗하게 미끄러지는 대신 배경이 깜박 거리고 끝까지 매우 가까워 질 때까지 점프합니다. 그 시점에서 예상대로 동작합니다.

편집 : 문제는 사실 CSS에서 문제가되었습니다. JavaScript/jQuery가 정확합니다.

페이지 :

<div id="Slider"></div> 

관련 CSS :

#Slider { 
position: fixed; 
top: 0px; bottom: 0px; 
left: 0px; right: 100%; 
z-index: fixed; 
background-color: red; 
} 

관련 자바 스크립트 :

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; 

관련 HTML andrewcombs13.com/myStuff/timer/ 창문. time은 타이머에 남아있는 현재 시간이고, window.timeSet은 타이머의 초기 값이며, window.tickLength는 타이머 진행 함수가 호출되는 빈도이며 window.lastSliderPercent는 여기에서만 사용됩니다.

전체 소스는 여기에서 찾을 수 있습니다 :
HTML :보기 소스 : andrewcombs13.com/myStuff/timer/
CSS : andrewcombs13.com/myStuff/timer/timer.css를
자바 스크립트 : andrewcombs13.com/ mystuff에/타이머/

을 timer.js 내 설정 :
윈도우 7 64 비트
파이어 폭스 29.0.1
크롬 34.0.1847.137 m

USI ng jQuery 1.11.1 및 jQuery UI 1.10.4 from Google CDN

Answer 1

Firefox가 값을 변경하는 방법을 보면 left:0px이 #slider에 할당되어 Firefox가 중지 된 후 Firefox가 right css 속성을 해결하는 데 문제가있는 것으로 보입니다. CSS에서 left:0px을 (를) 삭제하고 width:100%을 추가하면 문제가 해결 된 것으로 보입니다.

Answer 2

animate 대신에 css을 사용하면됩니다.

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

이 문제가 해결됩니다.