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의 애니메이션은 플러그인을 통해 제공되지만 제거 된 경우에도 각 동작은 눈에 띄는 지연으로 발생합니다. 페이드 인/아웃은 선택한 요소를 한꺼번에 사라지게하고 애니메이션의 각 라인은 한 번에 모두가 아니라 후속 간격으로 발생합니다.

어떤 원인 일 수 있습니까? 전이 를 대체하기 위해이 jquery plugin를 사용

는

Answer 1

물결이 거침을 해결