CSS에서 DIV에서 jQuery로 회전하면 비정상적인 스냅이 발생합니다.

Question

So I've seen a good example on how to rotate a DIV with jQuery and CSS3 manipulation 이제는 div에서 매끄러운 호버 효과를 만들려고 노력하면서 DIV가 -15deg로 되돌아 가서 15deg로 이동해야합니다.

예를 들어 버튼을 클릭 할 때이 효과를 첨부했습니다.

"bk"를 처음 누르면 div가 스냅되고 "fwd"를 누르면 다시 나타납니다.

나는 이유를 알 수없는 것 같습니다.

http://jsfiddle.net/ZnvKs/

.red 
{ 
    width:200px; 
    position:absolute; 
    top:50px; 
    left:50px; 
    height:200px; 
    background:red; 
    -webkit-transform: rotate(10deg); 
    border-spacing:0px; 
} 


$('#bk').click(function() { 

    $('.red').animate({ 
     borderSpacing: -15 
    }, { 
     step: function(now, fx) { 
      $(this).css('-webkit-transform', 'rotate(' + now + 'deg)'); 
     }, 
     duration: 'slow' 
    }, 'linear'); 
}); 

$('#fwd').click(function() { 

    $('.red').animate({ 
     borderSpacing: 15 
    }, { 
     step: function(now, fx) { 
      $(this).css('-webkit-transform', 'rotate(' + now + 'deg)'); 
     }, 
     duration: 'slow' 
    }, 'linear'); 

});​ 

Answer 1

당신은 두 번 일어나는 계단 함수, 지금은 매개 변수 값이 0 처음으로, 그것은

(15)의 값은 수행을 가지고 다음 시간을 디버깅하는 경우 그 모든 것이 필요합니다. 클래스를 업데이트하여 CSS로 동일한 작업을 수행 할 수 있습니다.

UPDATE :

이 스크립트입니다 :

http://jsfiddle.net/carlosmartinezt/ZnvKs/3/

.red 
{ 
    width:200px; 
    position:absolute; 
    top:50px; 
    left:50px; 
    height:200px; 
    background:red; 
    -webkit-transform: rotate(10deg); 
    -webkit-transition: 0.5s linear; 
    border-spacing:0px; 
} 
.red.bk{ 
    -webkit-transform: rotate(-15deg); 
} 
.red.fw{ 
    -webkit-transform: rotate(15deg); 
}​ 

그런 다음 스크립트가 단순화가

$('#bk').click(function() { 
    $('.red').removeClass("fw").addClass("bk"); 
}); 

$('#fwd').click(function() { 
    $('.red').removeClass("bk").addClass("fw"); 

});​