使用css3过渡后jquery动画断断续续
动画最初工作正常，但另一个函数使用css3过渡属性来动画“旋转”，并且在此运行之后，动画变得非常不稳定。
以下两个function变得不稳定：
function fadePlayer(){ $(".logof, .location").fadeOut(2000); $(".turntable, .arm, .bio, .controls").fadeIn(2000); $(".logor").animate({ backgroundSize: "104px 103px", height: "103px", width: "104px", top: "5px", left: "33px" }, 1000); } 和
function unFadePlayer(){ $(".logof, .location").fadeIn(500); $(".turntable, .arm, .bio, .controls").fadeOut(500, function(){ }); $(".logor").animate({ backgroundSize: "49px 49px", height: "49px", width: "49px", top: "23px", left: "63px" }, 250); }
过渡效果的调用方式如下：
playing: function(){ var degree = 0; spinAction = setInterval(function(){ degree = degree < 5 ? degree + 5 : 0; $(".logor").css({ '-webkit-transition':'all 1s ease-in-out', '-webkit-transform':'rotate('+degree+'deg)', '-ms-transition':'all 1s ease-in-out', '-ms-transform':'rotate('+degree+'deg)', '-moz-transition':'all 1s ease-in-out', '-moz-transform':'rotate('+degree+'deg)', '-o-transition':'all 1s ease-in-out', '-o-transform':'rotate('+degree+'deg)', 'transition':'all 1s ease-in-out', 'transform':'rotate('+degree+'deg)', }); }, 1000); var angle = 0; wobbleAction = setInterval(function(){ angle = angle < 2 ? angle + 2 : 0; $(".arm").css({ '-webkit-transform-origin':'14 14', '-webkit-transition':'all 1s ease-in-out', '-webkit-transform':'rotate('+angle+'deg)', '-ms-transform-origin':'14 14', '-ms-transition':'all 1s ease-in-out', '-ms-transform':'rotate('+angle+'deg)', '-moz-transform-origin':'14 14', '-moz-transition':'all 1s ease-in-out', '-moz-transform':'rotate('+angle+'deg)', '-o-transform-origin':'14 14', '-o-transition':'all 1s ease-in-out', '-o-transform':'rotate('+angle+'deg)', 'transform-origin':'14 14', 'transition':'all 1s ease-in-out', 'transform':'rotate('+angle+'deg)', }); }, 1000); }, pause: function(){ clearInterval(spinAction); clearInterval(wobbleAction); },
“播放”和“暂停”只是响应事件的方法。
backgroundSize的动画是通过插件提供的，但即使采用了该插件，每个动作都会发生明显的延迟。 fadeIn / Out停止一致地淡化所选元素，并且动画的每一行都在后续间隔中发生，而不是一次发生。
知道是什么原因引起的吗？
使用此jquery插件替换转换可以解决不稳定问题