Correct way to animate box-shadow with jQuery

Question

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

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

Answer 1

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 JS 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:

Vanilla JS:

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

jQuery:

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

Answer 2

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/

Answer 3

If you don't want to use a plugin, it can be done with a bit of CSS:

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

Check it out: http://jsfiddle.net/Z8E5U/

If you want full documentation on CSS animations, your path to wizardry begins here..

Answer 4

I love the ShaneSauce solution ! Use a class intead of an ID and you can add/remove the effect to any element using jQuery addClass/delay/removeClass :

$('.error').each( function(idx, el){
    $( el )
        .addClass( 'highlight' )
        .delay( 2000 )
        .removeClass( 'highlight' );
});

Answer 5

Here is an example of how to do it without a plugin: jQuery animated Box But it doesn't have the extra functionality that comes with the use of a plugin, but I personally like to see (and understand) the method behind the madness.