Correct pour animer le box-shadow avec jQuery

Réponse directe

À l'aide de Edwin Martin plugin jQuery pour l'animation de l'ombre, qui s'étend de la .animate méthode, vous pouvez simplement utiliser la syntaxe normale avec "boxShadow" et toutes les facettes de celle - couleur, le x - et y-offset, le flou rayon et propagation de rayon de - s'anime. Il comprend plusieurs ombre de soutien.

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

---

À l'aide de CSS au lieu des animations

jQuery anime par la modification de la style propriété des éléments du DOM, ce qui peut causer des surprises avec la spécificité et déplace les informations de style de vos feuilles de style.

Je ne trouve pas de prise en charge du navigateur stats pour les CSS de l'ombre à l'animation, mais vous pouvez envisager d'utiliser jQuery pour appliquer une animation à base de classe au lieu de la manipulation de l'animation directement. Par exemple, vous pouvez définir une zone d'ombre de l'animation dans votre feuille de style:

@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;
}

Vous pouvez ensuite utiliser le natif animationend événement pour synchroniser la fin de l'animation avec ce que vous faisiez dans votre code JS:

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

Si vous ne souhaitez pas utiliser un plugin, il peut être fait avec un peu de 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/

Si vous voulez une documentation complète sur les animations CSS, votre accès à la magie commence ici..

Voici un exemple de comment le faire sans plugin: jQuery animation de la Boîte de Mais il n'a pas la fonctionnalité supplémentaire qui vient avec l'utilisation d'un plugin, mais personnellement, j'aime à voir (et comprendre) la méthode derrière la folie.