Comment animer Box-Shadow avec des animations jQuery et CSS ?

Comment animer Box-Shadow avec jQuery

Pour animer la propriété box-shadow avec jQuery, vous pouvez utilisez la méthode .animate() fournie par le plugin jQuery pour l'animation d'ombres, qui étend la méthode .animate.

Direct Answer

La syntaxe correcte est la suivante :

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

Ce code animera chaque facette de l'ombre de la boîte : couleur, décalage x et y, flou -radius et spread-radius.

Utiliser des animations CSS à la place

Vous pouvez choisir d'utiliser des animations CSS au lieu de gérer l'animation directement avec jQuery. Cela peut aider à éviter les surprises avec la spécificité et à conserver vos informations de style dans vos feuilles de style.

Voici un exemple d'animation CSS que vous pouvez définir dans votre feuille de style :

<code class="css">@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;
}</code>

Vous pouvez ensuite utiliser l'événement animationend pour synchroniser la fin de l'animation avec votre code JS.

Vanilla JS :< ;/h4>

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

jQuery :

<code class="js">$(element).addClass('shadow-pulse')
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse')
    // do something else...
})</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!