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

        }
    }
});

我们只需添加一个保存真/假的数据参数，检查条件，并做出相应的响应。

要从上一次旋转返回 90 度，我们只需使用-=90参数animateTo。

你可以自己检查一下