jQuery を使用してクロスブラウザー CSS 回転アニメーションを実現するにはどうすればよいですか?

jQuery.animate() によるクロスブラウザー CSS 回転

問題:

の実行jQuery.animate() を使用した CSS 回転アニメーションが機能しないクロスブラウザ。回転は .css() を使用すると機能しますが、.animate() を使用すると機能しません。

原因:

CSS Transforms は jQuery で直接アニメーション化できません。

解決策:

を実行するにはjQuery を使用した CSS 変換アニメーションでは、次の代替メソッドを使用できます:

function AnimateRotate(angle) {
    var $elem = $('#MyDiv2');
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

説明:

このメソッドは、カスタムの「ステップ」コールバック関数を使用して更新します。アニメーションの各ステップで選択された要素の「transform」プロパティ。 「ステップ」関数は、現在のアニメーション位置 (現時点) をパラメーターとして受け取り、これを使用して目的の回転角度を計算できます。

プラグイン:

このメソッドを jQuery プラグインにラップして簡単にしますuse:

$.fn.animateRotate = function(angle, duration, easing, complete) {
    return this.each(function() {
        var $elem = $(this);
        $({deg: 0}).animate({deg: angle}, {
            duration: duration,
            easing: easing,
            step: function(now) {
                $elem.css({
                   transform: 'rotate(' + now + 'deg)'
                 });
            },
            complete: complete || $.noop
        });
    });
};

Usage:

プラグインを使用するには、次のように呼び出すだけです:

$('#MyDiv2').animateRotate(90);

Updates:

提供されたソリューションは、効率を向上させ、より多くの機能を提供するために数回更新されています。柔軟性。

• アップデート 2: 引数の順序が重要でないように最適化されました。
• アップデート 2.1: コンテキストの問題を修正しました。コールバックが完了しました。
• 更新2.2: アニメーションを切り替えるための開始パラメーターを追加しました。

追加の使用法の詳細:

• animateRotate 関数は、次のようないくつかのオプションのパラメーターを受け入れます。持続時間、イージング、および完了。デフォルト値が提供されます。
• ユーザーは指定できます。これらのパラメータは、位置引数として、またはオブジェクトとして、さまざまな方法で使用できます。
• 「ステップ」関数は、アニメーション ステップごとに回転をさらに制御します。

以上がjQuery を使用してクロスブラウザー CSS 回転アニメーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。