使用jQuery 製作Box-Shadow 動畫:正確的方法
簡介
簡介<code class="javascript">$(element).animate({ boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)" });</code>
使用此插件,盒子陰影的各個方面(顏色、偏移、半徑)都可以平滑地進行動畫處理。它還支援多個陰影的動畫。
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中文網其他相關文章!