[ACCEPTED]-Correct way to animate box-shadow with jQuery-box-shadow

Accepted answer
Score: 80

Direct answer

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

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

Using CSS animations instead

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

I can't find browser 8 support stats for CSS shadow animation, but 7 you might consider using jQuery to apply 6 an animation-based class instead of handling 5 the animation directly. For example, you 4 can define a box-shadow animation in your 3 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 2 to synchronise the end of the animation 1 with what you were doing in your JS code:

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

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

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

You 3 can do something like this:

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

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

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

Score: 15

If you don't want to use a plugin, it can 3 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 2 you want full documentation on CSS animations, your 1 path to wizardry begins here..

Score: 4

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

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

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

More Related questions