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");

     }

 }); 

HTML

<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>

我在放大和缩小上设置了限制器，所以这就是条件的原因。

Answer 1

修复它，这似乎工作：

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