web-dev-qa-db-ja.com

jqueryは回転するdivをアニメーション化します

次のようなアニメーション関数でdivを回転させたい

 $('div').animate({rotate: '30deg'},1000);

私はこれを見つけました：

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

しかし、もっと公式な方法があるのか​​、少なくとも別の方法があるのか​​知りたいです。

ありがとう

jquerycssjquery-animaterotation
5
user1246035

CSS3をjQueryと組み合わせて使用​​することに慣れている場合は、おそらくこの方法が役立つかもしれません。

[〜＃〜] html [〜＃〜]

<div id="click-me">Rotate</div>

<div id="rotate-box"></div>

[〜＃〜] css [〜＃〜]

#rotate-box{

   width:50px;
   height:50px;
   background:#222222;

}

@-moz-keyframes rotatebox /*--for firefox--*/{

    from{
        -moz-transform:rotate(0deg);
    }       
    to{
        -moz-transform:rotate(360deg);
    }                       

}

@-webkit-keyframes rotatebox /*--for webkit--*/{

    from{
        -webkit-transform:rotate(0deg);
    }       
    to{
        -webkit-transform:rotate(360deg);
    }                       

}

#click-me{
   font-size:12px;
   cursor:pointer;
   padding:5px;
   background:#888888;
}

そして、問題の要素がlink/div/buttonのクリックで回転することになっていると仮定すると、jQueryは次のようになります。

jQuery

$(document).ready(function(){
    $('#click-me').click(function(){
        $('#rotate-box').css({

        //for firefox
        "-moz-animation-name":"rotatebox",
        "-moz-animation-duration":"0.8s",
        "-moz-animation-iteration-count":"1",
            "-moz-animation-fill-mode":"forwards",

        //for safari & chrome
        "-webkit-animation-name":"rotatebox",
        "-webkit-animation-duration":"0.8s",
        "-webkit-animation-iteration-count":"1",
        "-webkit-animation-fill-mode" : "forwards",

        });
    });
});

JQueryはまだ.animate（）でrotate（deg）をサポートできないので、CSS3でアニメーションのキーフレームを事前に定義し、その特定のアニメーションにラベルまたは識別子を割り当てることで、ちょっと騙されました。この例では、そのラベル/識別子はrotateboxとして定義されています。

これから起こることは、クリック可能なdivがクリックされた瞬間に、jQueryスニペットは.css（）を利用し、必要なプロパティを回転可能な要素に割り当てます。これらのプロパティが割り当てられるとすぐに、要素からCSS3アニメーションキーフレームへのブリッジが作成され、アニメーションを実行できるようになります。また、animation-durationプロパティを変更して、アニメーションの速度を制御することもできます。

個人的には、この方法は、回転をアクティブにするためにクリックまたはマウスのスクロールイベントが必要な場合にのみ必要だと思います。ドキュメントの読み込み直後に回転が実行されることになっている場合は、CSS3のみを使用するだけで十分です。ホバーイベントが回転をアクティブにすることになっている場合も同じことが当てはまります。要素を要素の疑似クラスの回転アニメーションにリンクするCSS3アニメーションプロパティを定義するだけです。

ここでの私の方法は、回転をアクティブにするためにクリックイベントが必要である、またはこれに関与するためにjQueryが何らかの形で必要であるという仮定に基づいています。この方法はかなり面倒だと理解しているので、誰かが意見を持っているなら、遠慮なく提案してください。この方法にはCSS3が含まれるため、IE8以下では機能しないことにも注意してください。

9
vynx

私が感じる最も単純なのは、jsfiddleのこの例です

$(function() {
    var $elie = $("img"), degree = 0, timer;
    rotate();
    function rotate() {

        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
        $elie.css('transform','rotate('+degree+'deg)');                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },5);
    }

    $("input").toggle(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
});

http://jsfiddle.net/eaQRx/

5
rajesh_kw

QTransform 回転、傾斜、拡大縮小、平行移動が可能で、ブラウザ間で機能します。

_QTransform.js_をダウンロードしてHTMLに含めます。


_<script src="js/qTransform.js"></script>_

Divに固定のheight-widthを指定し、次のスクリプトを追加します。

_$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);
_

ここで（box4、box5、box6は私のdiv IDです）。

delay(300), delay(700) & delay(1200)は、300、500、1200ミリ秒後にアニメーションを開始します。そして最後の500はアニメーションの長さです。

回転角を手動で指定する場合は、次のように実行できます。

変数で角度を取ります。例えば.

_var degAngle = 60;
_

次のようにスクリプトに追加します

_$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);
_

回転とともにスケールなどの複数の効果を提供することもできます。例えば。、

_$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);
_


なぜQTransform？

日付まで、jQueryはCSS3アニメーションをサポートしていません。このプラグインは、目標を達成するのに役立ちます。



これがあなたのために働くことを願っています。

2
Debopam Mitra

このソリューションは、CSS3、JQuery、およびHTML5のデータ属性を使用します。 CSS3イージングを使用して同じ方向に繰り返し回転させることができます。他のCSS3ソリューションは通常、一方の方向に回転してからもう一方の方向に戻ります。一方向にのみ回転する（たとえば時計回りに）と、更新ボタンや読み込みボタンなどに役立ちます。

<style>
    .rotate{
        -moz-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
</style>

<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
    $(".rotate").click(function(){
        var rotate = 180;
        var elem = $(this);

        //get the current degree
        var currentDegree = 0;
        if(typeof(elem.attr('data-degree')) != 'undefined') {
            currentDegree += parseInt(elem.attr('data-degree'), 10);
        }

        //calculate the new degree
        var newDegree = currentDegree + rotate;

        //modify the elem css
        elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'});  
        elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'});
        elem.css('transform','rotate(' + newDegree + 'deg)');

        //store the degree for next time
        elem.attr('data-degree', newDegree);
    });
</script>

注：遷移行列を解析する必要がないように、現在の次数をデータ属性に格納します。

0
Collin Krawll

JQueryを使用してスケールと回転をアニメーション化するために使用したコードは次のとおりです。

    var $elem = $('#myImage');
    $({ deg: 0 }).animate({ deg: 359 }, {
        duration: 600,
        step: function (now) {
            var scale = (2 * now / 359);
            $elem.css({
                transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
            });
        }
    });

これは基本的に0から359までループし、画像をその角度だけ回転させ、0から2の間で拡大縮小するため、アニメーション中に画像がゼロから2倍のサイズに拡大します。

0
Mike Gledhill