jQuery.animate() をクロスブラウザー CSS ローテーションに使用するにはどうすればよいですか?

jQuery Animate() を使用したブラウザ間の CSS 回転

はじめに

CSS の回転が効果的に機能するには、ブラウザ間の互換性が必要です。この記事は、問題を調査し、jQuery.animate() を使用して回転を実現するための解決策を提供することで、この課題に取り組むことを目的としています。

jQuery Rotate Issue

提供されたコード スニペットは、CSS 変換が jQuery と互換性がないことを示しています。 .animate()。 css() は要素を正常に回転できますが、animate() は回転できません。

解決策

解決策には、アニメーション内でステップ コールバックを利用することが含まれます。このコールバックは現在のアニメーション位置へのアクセスを提供し、CSS を使用して回転変換を手動で適用できるようにします。変更されたコードは次のとおりです:

function AnimateRotate(angle) {
    // Get the jQuery object for better performance
    var $elem = $('#MyDiv2');
    // Use a pseudo object for animation, starting from `0` to `angle`
    $({ deg: 0 }).animate({ deg: angle }, {
        duration: 2000,
        step: function(now) {
            // Set the rotation using the CSS transform property
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

便利な jQuery プラグイン

使用を簡略化するために、jQuery プラグインを作成できます:

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

高度な機能

最適化された順序引数:

プラグインの更新バージョンは、引数の最適化された順序 (角度、期間、イージング、完了) をサポートします。

機能の切り替え:

回転を前後に切り替える必要があるシナリオでは、開始パラメーターを関数に追加して、より多くの操作を可能にすることができます。

結論:

提供されたソリューションは、jQuery.animate() による要素の回転の問題を効果的に解決します。ステップ コールバックを利用して jQuery プラグインを作成することで、開発者は CSS ローテーションのブラウザ間互換性を簡単に実現できます。

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