如何使用 jQuery 製作 Box-Shadow 動畫：外掛程式與 CSS 動畫？

使用jQuery 製作Box-Shadow 動畫：正確的方法

簡介

簡介

用於陰影動畫的 jQuery 外掛程式

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

使用 jQuery 製作盒子陰影動畫的最直接方法是利用 Edwin Martin 的 jQuery 外掛專門為此任務而設計。透過擴展 .animate 方法，它簡化了過程：

使用此插件，盒子陰影的各個方面（顏色、偏移、半徑）都可以平滑地進行動畫處理。它還支援多個陰影的動畫。

CSS 動畫作為替代方案

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

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

雖然 jQuery 的方法很有效，但它可能會幹擾特異性並將樣式資訊移到樣式表之外。對於瀏覽器支援足夠的情況，CSS 動畫提供了更清晰的解決方案：

透過使用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中文網其他相關文章！