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);
});

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

1 个答案: