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

はじめに

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

jQuery Rotate Issue

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

解決策

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

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 プラグイン

使用を簡(jiǎn)略化するために、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
        });
    });
};

高度な機(jī)能

最適化された順序引數(shù):

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

機(jī)能の切り替え:

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

結(jié)論:

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

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