jQuery を使用して Box-Shadow をアニメーション化する方法: プラグインと CSS アニメーション?

jQuery を使用したボックス シャドウのアニメーション: 正しいアプローチ

概要

jQuery、人気の JavaScript ライブラリで、DOM 要素を操作するための強力なツールを提供します。そのような操作の 1 つは、box-shadow プロパティをアニメーション化して視覚効果を作成することです。ただし、これを実現するための正しい構文は混乱を招く可能性があります。

シャドウ アニメーション用の jQuery プラグイン

jQuery を使用してボックス シャドウをアニメーション化する最も簡単な方法は、Edwin を利用することです。 Martin の jQuery プラグインは、このタスクのために特別に設計されました。 .animate メソッドを拡張することで、プロセスが簡素化されます。

<code class="javascript">$(element).animate({
    boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});</code>

このプラグインを使用すると、ボックス シャドウのあらゆる側面 (カラー、オフセット、半径) がスムーズにアニメーション化されます。複数のシャドウのアニメーションもサポートしています。

代替としての CSS アニメーション

jQuery のアプローチは効果的ですが、特異性を妨げ、スタイル情報をスタイルシートの外に移動する可能性があります。 。ブラウザーのサポートが十分な状況では、CSS アニメーションがよりクリーンなソリューションを提供します。

<code class="css">@keyframes shadowPulse {
    ...
}

.shadow-pulse {
    ...
}</code>

JavaScript でアニメーションベースのクラスを適用し、animationend イベントをリッスンすることで、アニメーションを追加のアクションと同期できます。

バニラJS:

<code class="javascript">element.classList.add('shadow-pulse');
element.addEventListener('animationend', () => {
    // ...
});</code>

jQuery:

<code class="javascript">$(element).addClass('shadow-pulse');
$(element).on('animationend', function() {
    // ...
});</code>

以上がjQuery を使用して Box-Shadow をアニメーション化する方法: プラグインと CSS アニメーション?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。