Correct way to animate box-shadow with jQuery

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. It includes multiple shadow support.

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

---

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 animationend event to synchronise the end of the animation with what you were doing in your JS code:

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

If you are using jQuery 1.4.3+ then you can take advantage of the cssHooks code that was added.

By using the boxShadow hook: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

You can do something like this:

$('#box').animate({
    'boxShadowX': '10px',
    'boxShadowY':'10px',
    'boxShadowBlur': '20px'
});

The hook doesn't let you animate the color yet but I am sure with some work that could be added.

Example: http://jsfiddle.net/petersendidit/w5aAn/