如何使用jQueryRotate返回到原始位置

Question

我嘗試了jQueryRotate，並且想要使某個img在單擊時旋轉90度，然後在下一次單擊時旋轉回原始位置。我已經通過不同的谷歌搜索等無情地尋找，但還沒有找到我想要的答案。

這裏是我的代碼：

 <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#menu_icon").rotate({bind:{click: function(){ 
       $(this).rotate({ duration:100, angle:0,animateTo:90,easing: $.easing.easeInOutExpo }, 10)} 
       } 
      }); 
     }); 
    </script> 

我將如何調整它來創建我想要的結果？ 我不想讓它只是閃回90度， 我希望它像第一次點擊一樣隨着動畫移動。

Answer 1

$("#menu_icon").rotate({ 
    bind:{ 
     click: function(){ 
      var $this = $(this); 
      if($this.data('rotate')){ 
       $this.data('rotate', false); 
       $this.rotate({ duration:100, angle:0,animateTo:"-=90",easing: $.easing.easeInOutExpo }, 10) 
      }else{ 
       $this.data('rotate', true); 
       $this.rotate({ duration:100, angle:0,animateTo:90,easing: $.easing.easeInOutExpo }, 10) 
      } 

     } 
    } 
}); 

我們簡單地添加一個數據參數，該數據參數包含true/false，檢查條件並做出相應的響應。

要從最後一次旋轉回到90度，我們只需將-=90用於參數animateTo。

You can check it out for yourself