如何使用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