jQuery Transit 구현 관련 문제

Question

기본적으로 상위 수준의 이미지 뷰어에있는 프로토 타입을 작업 중입니다. 구현 (회전, 확대, 축소, 왼쪽, 오른쪽, 위아래). 먼저 회전 할 때 문제가 발생하여 방향 컨트롤의 방향이 엉망이 된 것 같습니다. (실제로 그것이 가정하고있는 것을하고있다). 이상한 점은 방향 컨트롤을 먼저 누르면 작동한다는 것입니다.

('rotation')과 같은 값을 얻을 수 있지만이 시점에서 문제가 확실하지 않은 것처럼 나는 무엇을 해야할지 잘 모릅니다. 여기

내 구현 :

JS

var currentScale = 1; 

$(".icon-rotate-right").click(function() { 
    $('#img-contain2').transition({ 
     rotate: '+=90deg' 
    }); 
}); 

$(".icon-chevron-left").click(function() { 
    $('#img-contain2').transition({ 
     x: '-=90' 
    }); 
}); 

$(".icon-chevron-right").click(function() { 
    $('#img-contain2').transition({ 
     x: '+=90' 
    }); 
}); 

$(".icon-chevron-up").click(function() { 
    $('#img-contain2').transition({ 
     y: '-=90', 
    }); 
}); 

$(".icon-plus").click(function() { 
    if (currentScale >= 5) { 
     return false; 

    } else { 

     currentScale++; 
     $('#img-contain2').transition({ 
      scale: '+=1' 
     }); 
     $('#img-contain2').css("margin-top", "-90px"); 
    } 

}); 

$(".icon-minus").click(function() { 
    if (currentScale <= 1) { 
     $('#img-contain2').transition({ 
      scale: '.5' 
     }); 
     $('#img-contain2').css("margin-top", "-240px"); 

     if (currentScale <= 1) { 
      return false; 
     } 

    } else { 
     currentScale--; 
     $('#img-contain2').transition({ 
      scale: '-=1' 
     }); 
     $('#img-contain2').css("margin-top", "-240px"); 

    } 

}); 

나는 그 이유 때문에, 밖으로 줌 - 인에 제한을두고

<div class="inner-contain-main"> 
<div class="viewer"> 
    <div class="control-container"> 
     <i class="icon-rotate-right"></i><i class="icon-plus"></i><i class="icon-minus"></i> 
     <div class="direction-container"><i class="icon-chevron-left"></i><i class="icon-chevron-up"></i><i class="icon-chevron-right"></i></div> 
    </div> 
    <div id="img-contain"> 
     <div id="instructions"> 
     <p>Loading Preparation...</p> 
     </div> 
     <div id="img-contain2"></div> 
    </div> 
</div> 

HTML 조건부

Answer 1

를 고정이 작동하는 것 :

$(".icon-rotate-right").click(function() { 
    $("#img-contain2").transition({ 
     x: "+=0", 
     y: "+=0", 
     rotate: "+=90deg" 
    }); 
});