0

ボタンを押すと、段落をアニメーション化して開き、ボタンを45度回転させてから、もう一度クリックすると、段落を閉じてさらに45度前方にアニメーション化するボタンがあります。トグルスライドを使用して段落を開いたり閉じたりしていますが、正常に機能します。ただし、回転アニメーションを関数に追加する方法はよくわかりません。理想的には、可能であれば、jqueryのみを使用し、css変換を使用せずに回転させたいと思います。しかし、これが不可能な場合は、jqueryでcssを使用しても問題ありませんが、すべて1つの関数にしたいだけです。今、これは私が持っているものです、そしてこれで私を助けてくれて前もって感謝します：

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

Effects_of_yoga_infoは私がここで回転させたいものです

4

1 に答える 1

0

これを試して。これを組み合わせてテストしました。

$(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);
});
于 2012-09-28T15:40:24.600 に答える