jquery切换幻灯片和切换旋转动画答案

【问题标题】：jquery toggle slide and toggle rotation animatejquery切换幻灯片和切换旋转动画
【发布时间】：2012-09-28 14:53:48
【问题描述】：

当它被按下时我有一个按钮我希望它为打开的段落设置动画并将按钮旋转 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 是我想在这里旋转的

【问题讨论】：

标签： jquery animation rotation

【解决方案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);
});

【讨论】：

嗯，所以我在这个小提琴中尝试它，它似乎没有去jsfiddle.net/nzLUS 没有办法只添加像 $('#box').animate 这样简单的东西( $(this).css('-webkit-transform','rotate('+now+'deg)'); }, duration:'slow' },'linear');就在 slideToggle 之后？