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

如何使用jQueryRotate返回原始位置

1 个答案: