chchrist chchrist - 15 days ago 6
jQuery Question

Correct way to animate box-shadow with jQuery

Which is the correct syntax to animate the box-shadow property with jQuery?

$().animate({?:"0 0 5px #666"});

Answer

Direct answer

Using Edwin Martin's jQuery plugin for shadow animation, which extends the .animate method, you can simply use the normal syntax with "boxShadow" and every facet of that - "color, the x- and y-offset, the blur-radius and spread-radius" - gets animated:

$(selector).animate({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" }); 

Edit: Now includes multiple shadow support.


Using CSS animations instead

jQuery animates by changing the style property of DOM elements, which can cause surprises with specificity and moves style information out of your stylesheets.

I can't find browser support stats for CSS shadow animation, but you might consider using jQuery to apply an animation-based class instead of handling the animation directly. For example, you can define a box-shadow animation in your stylesheet:

@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;
}

You can then use the native cssanimationend property to synchronise the end of the animation with what you were doing in your JS code:

$('.element').addClass('shadow-pulse');
$('.element').on('cssanimationend', function(){  
    $('.element').removeClass('shadow-pulse');
    // do something else...
});