Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
奇怪的IE vs Firefox Javascript动画速度_Javascript_Jquery_Firefox_Timer_Internet Explorer 9 - Fatal编程技术网

奇怪的IE vs Firefox Javascript动画速度

奇怪的IE vs Firefox Javascript动画速度,javascript,jquery,firefox,timer,internet-explorer-9,Javascript,Jquery,Firefox,Timer,Internet Explorer 9,我有下面的功能,它与一系列不同的插件设置相关联,允许您配置旋转对象的手柄、速度和角度。在IE9中,一切都运行得非常清晰,非常好,但firefox是不稳定的 // 1. FUNCTION ROTATE ANIMATIONS IN function rotate_on(degree, index){ clearTimeout(rotateofftimer); /* CLEAR ANIMATION OUT TIMER */ // A. APPLY THE CROSS-BROWSER CSS FO

我有下面的功能,它与一系列不同的插件设置相关联,允许您配置旋转对象的手柄、速度和角度。在IE9中,一切都运行得非常清晰,非常好,但firefox是不稳定的

// 1. FUNCTION ROTATE ANIMATIONS IN
function rotate_on(degree, index){
clearTimeout(rotateofftimer);   /* CLEAR ANIMATION OUT TIMER */

// A. APPLY THE CROSS-BROWSER CSS FOR ROTATIONS
if((ievers==6)||(ievers==7)||(ievers==8)){ if(ievers==8){ /* IE 8 CODE */ current_obj.css({/* IE8 */'-ms-filter':'"progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')"',/* IE<8 */'filter':'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')'});} else { /* IE 6/7 CODE */ };

} else { /* NON IE */ 
current_obj.css({/* W3C CSS3 standard */'transform':'translateX(0)rotate('+degree+'deg)','transform-origin':OS.rotate_handle_on_set[index],/* Firefox */'-moz-transform':'translateX(0)rotate('+degree+'deg)','-moz-transform-origin':OS.rotate_handle_on_set[index],/* Chrome, Safari, Mobile, Etc. */'-webkit-transform':'translateX(0)rotate('+degree+'deg)','-webkit-transform-origin':OS.rotate_handle_on_set[index],/* Opera */'-o-transform':'translateX(0)rotate('+degree+'deg)','-o-transform-origin':OS.rotate_handle_on_set[index],/* IE>=9 */'-ms-transform':'rotate('+degree+'deg)','-ms-transform':'translateX(0)rotate('+degree+'deg)','-ms-transform-origin':OS.rotate_handle_on_set[index]});};

// B. TEST FOR REPEAT ROTATIONS - IF VALUES ARE THE SAME, REPEAT ROTATIONS
if(OS.rotate_on_set[index]==OS.rotate_off_set[index]){ 

// SAVE THE ENDING VALUE TO PICKUP ON NEXT PLAY (IF LOOPING)
OS.rotate_on_set[index]=degree;OS.rotate_off_set[index]=degree; degree++;
}else{ if(degree<OS.rotate_off_set[index]){ degree++ };};

// C. TRIGGER THE FUNCTION IN A TIMER, BASED ON USER SPEED
rotateontimer = setTimeout(function(){rotate_on(degree, index)},OS.rotate_speed_on_set[index]);};
//1。函数在中旋转动画
函数旋转打开(度、索引){
clearTimeout(rotateofftimer);/*清除动画输出计时器*/
//A.为旋转应用跨浏览器CSS
如果((ievers==6)| |(ievers==7)| |(ievers==8){/*IE 8代码*/current_obj.css({/*IE8*/'-ms过滤器“:”“progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')”,/*IE=9*/'-ms变换”“:“rotate('+degree+'degree+'deg)”,-ms变换”:“translateX(0)rotate:“+degree+'degree+'deg)”,-ms变换原点旋转”;[U];[U];
//B.重复旋转试验-如果值相同,则重复旋转
如果(OS.rotate\u on\u set[index]==OS.rotate\u off\u set[index]){
//将结束值保存到下一次播放时拾取(如果循环)
OS.rotate_on_set[index]=度数;OS.rotate_off_set[index]=度数;度数++;

}else{if(degree这似乎就是Firefox的风格。我也有同样的问题,就是JS动画不连贯,只有在使用Firefox查看时才会出现。Internet Explorer 9(标准模式加上兼容模式“IE7”和“IE8”)和Chrome都能在任何情况下显示平滑的动画


相信我,我们不是唯一一个有这个问题的人,到目前为止还没有明确的解决方案。

你能发布一些更完整的代码,或者使用[?这个插件在这一点上非常长。基本上,在hover上调用这个函数和对象(以及它的索引)函数A:将用于旋转的初始CSS应用于当前对象(基于从JSON对象提取的用户设置).B:有一个循环旋转的选项,如果循环,则只保存当前角度。C.创建一个计时器,该计时器旋转对象并每X秒调用一次计时器。抱歉,其中有大量变量。基本上,该函数是在mouseover上调用的(并传递当前对象及其索引)。该对象已被设置为正确的角度。函数中有一个计时器,它每N秒调用一次函数。该函数增加度并将其应用于CSS。涉及此类内容时,我们生活在石器时代。FF的性能非常令人失望…(我在版本18上)对于Firefox,当您将translate3d(0,0,0)添加到transform属性时,它会强制浏览器中的硬件加速,使动画变得平滑。最好在页面加载时将其包含在样式表中,以获得最佳性能-