jquerycssjquery-animatebox-shadow

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"});

Solution

  • 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...
    })