jquery - jquery切换幻灯片和切换旋转动画

Question

当它被按下时我有一个按钮我希望它为打开的段落设置动画并将按钮旋转 45 度，然后当您再次单击它时，关闭该段落并再向前移动 45 度。我正在使用切换幻灯片来打开和关闭段落，它工作正常。我不太确定如何将旋转动画添加到函数中。理想情况下，如果可能的话，我希望只使用 jquery 而没有 css 转换来进行旋转。但是，如果在 jquery 中使用 css 是不可能的，但我只希望它是一个功能。现在这就是我所拥有的，并提前感谢您帮助我解决这个问题：

<script type="text/javascript">
$("#effects_of_yoga_info").click(function () {
  $("p#effects_of_yoga_text").slideToggle("fast");
});
</script>

effects_of_yoga_info 是我想在这里旋转的

Answer 1

尝试这个。我把它放在一起并进行了测试。

$(document).ready(function() {
    $('#effects_of_yoga_info').click(function() {
        var info = $(this);
        var rotation = parseInt(info.data('rotation'));

        $('p#effects_of_yoga_text').animate({
            height: 'toggle'
        },{
            step: function(now, fx) {
                var t = fx.start == 100 ? 100 - fx.now : fx.now;
                info.css('transform', 'rotate('+ (rotation + ((t / 100) * 45)) +'deg)');
            },
            complete: function() {
                info.data('rotation', rotation + 45);   
            },
            duration: 'fast'    
        });

    }).data('rotation', 0);
});