Manière correcte d'animer Box-Shadow avec jQuery

Question

Quelle est la syntaxe correcte pour animer la propriété box-shadow avec jQuery?

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

Answer 1

En utilisant le plugin jQuery d’ Edwin Martin pour l’animation des ombres , qui étend la méthode .animate , vous pouvez simplement utiliser la syntaxe normale avec "boxShadow" et chacune de ses facettes - "color, les décalages x et y, rayon de flou et rayon de propagation " - s'anime:

 $(selector).animate({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" }); 
 

Edit : Inclut désormais plusieurs supports shadow.

Answer 2

Si vous utilisez jQuery 1.4.3+, alors vous pouvez prendre avantage de la cssHooks code qui a été ajouté.

À l'aide de la boxShadow crochet: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

Vous pouvez faire quelque chose comme ceci:

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

Le crochet ne les laissez pas vous animez la couleur encore mais je suis sûr qu'avec certains travaux qui pourraient être ajoutées.

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

Answer 3

Si vous ne voulez pas utiliser de plugin, vous pouvez le faire 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.*/
 

Découvrez-le: http://jsfiddle.net/Z8E5U/

Si vous voulez une documentation complète sur les animations CSS, votre chemin vers la magie commence ici ..

Answer 4

Voici un exemple de la manière de le faire sans plugin: Boîte animée jQuery Mais elle n’a pas les fonctionnalités supplémentaires fournies avec l’utilisation d’un plugin, mais j’aime personnellement voir (et comprendre) la méthode à l’origine de la folie.