How to Animate Box-Shadow with jQuery and CSS Animations?

How to Animate Box-Shadow with jQuery

To animate the box-shadow property with jQuery, you can use the .animate() method provided by the jQuery plugin for shadow animation, which extends the .animate method.

Direct Answer

The correct syntax is as follows:

$(element).animate({ 
    boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}) 

This code will animate every facet of the box shadow: color, x- and y-offset, blur-radius, and spread-radius.

Using CSS Animations Instead

You can opt to use CSS animations instead of handling the animation directly with jQuery. This can help prevent surprises with specificity and keep your style information within your stylesheets.

Here's a sample CSS animation that you can define in your stylesheet:

<code class="css">@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}
    
.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}</code>

You can then use the animationend event to synchronize the end of the animation with your JS code.

Vanilla JS:

<code class="js">element.classList.add('shadow-pulse')
element.addEventListener('animationend', event => {  
    element.classList.remove('shadow-pulse')
    // do something else...
})</code>

jQuery:

<code class="js">$(element).addClass('shadow-pulse')
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse')
    // do something else...
})</code>

The above is the detailed content of How to Animate Box-Shadow with jQuery and CSS Animations?. For more information, please follow other related articles on the PHP Chinese website!