1

重複の可能性:
jQuery: div 回転をアニメーション化するにはどうすればよいですか?

クリックすると中心点を中心に 30 度スムーズに回転させたい div があります。たくさん検索しましたが、仕事に取り掛かることができるものは見つかりませんでした。これが私がこれまでに試したことです-私の人生では、自分が間違っていることを理解することはできません.

$("#box").click(function() {
    $(this).animate({
        rotate: '30deg'
    }, 1000);
});​

そして、ここに例があります: jsFiddle

これはばかばかしいほど単純に思えますし、おそらく私は尋ねても生きたまま食べられるでしょうが、私はこれに真剣にこだわっています. 助けてくれてありがとう。

4

2 に答える 2

3

jQuery Rotate プラグインを使用してください。これはかなりクロスブラウザーです。

$("#box").rotate({ 
    angle:0,
        bind: {
            click : function(){
                var curAngle = parseInt($(this).getRotateAngle());
                $(this).rotate({
                    angle: curAngle,
                    animateTo: curAngle + 30
                });
            }
        }
   });

デモ : http://jsfiddle.net/svz2J/6/

以下のコメントで要求されているように、ボタンを使用してこれを行う方法。また、duration例を追加しました。

$("button").click(function(){ 
    var curAngle = parseInt($("#box").getRotateAngle()) || 0;
    $("#box").rotate({
        angle: curAngle,
        animateTo: curAngle + 30,
        duration: 5000
    });
});

</p>

デモ: http://jsfiddle.net/svz2J/10/

于 2012-06-12T23:07:00.763 に答える
1

代わりにこのプラグインを使用することを強くお勧めします: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

私はプロジェクトでアーレンが提案したもので何年も過ごしましたが、パフォーマンスが悪いために交換する必要がありました。

それが比較的低いプロセス集約的なものであれば、十分に公平です..ちょうど私が検討すると思った.

于 2012-06-12T23:12:23.873 に答える