Как вернуться в исходное положение с помощью jQueryRotate

Question

Я пытаюсь выполнить jQueryRotate, и я хочу сделать некий img поворот на 90 градусов при нажатии, а затем повернуть обратно в исходное положение при следующем нажатии. Я неумолимо просматривал различные поисковые запросы Google и т. Д., Но не нашел ответа, который я хочу.

Вот мой код:

 <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