使用css3轉換後jquery動畫波濤洶涌

Question

動畫首先運行正常，但另一個函數使用css3轉換屬性爲「旋轉」設置動畫，運行後動畫變得非常不連貫。

下面是成爲波濤洶涌的兩個功能：

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的動畫是通過一個插件提供的，但即使被取出，每個動作都會發生明顯的滯後。淡入/淡出會停止一致淡化所選元素，並且動畫的每一行都會在後續時間間隔內發生，而不是一次全部消失。

任何想法可能導致這種情況？

Answer 1

使用此jquery plugin來代替轉換 解決了轉折