CORRECTEMENT Animer box-shadow avec jQuery

Question

Quelle est la syntaxe correcte pour animer la boîte ombre propriété avec jQuery?

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

Answer 1

Réponse directe

Utilisation Edwin Martin animation plugin jQuery pour l'ombre , qui étend la méthode .animate, vous pouvez simplement utiliser la syntaxe normale avec "boxShadow" et toutes les facettes de ce - couleur , X- et offset y , la flou rayon et propagation rayon - s'anime. Il inclut le support d'ombres multiples.

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

---

Utilisation des animations CSS à la place

jQuery en changeant la animez propriété style des éléments DOM, ce qui peut causer des surprises avec des informations de style spécificité et se déplace hors de vos feuilles de style.

Je ne peux pas trouver un support du navigateur pour les statistiques animation ombre CSS, mais vous pouvez envisager d'utiliser jQuery pour appliquer une base animation class au lieu de gérer l'animation directement. Par exemple, vous pouvez définir une animation box-shadow 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 alors utiliser l'événement animationend natif pour synchroniser la fin de l'animation avec ce que vous faites dans votre code JS:

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

Answer 2

Si vous utilisez jQuery 1.4.3+ alors vous pouvez profiter du code cssHooks qui a été ajouté.

En utilisant le crochet boxShadow: https://github.com/ brandonaaron / jquery-cssHooks / blob / maître / boxshadow.js

Vous pouvez faire quelque chose comme ceci:

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

Le crochet ne vous permet pas d'animer la couleur encore, mais je suis sûr que certains travaux qui pourraient être ajoutés.

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

Answer 3

Si vous ne voulez pas utiliser un plug-in, 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 chemin vers la magie commence ici ..

Answer 4

J'aime la solution ShaneSauce! Utilisez un intead de classe d'un ID et vous pouvez ajouter / supprimer l'effet à tout élément en utilisant jQuery addClass / délai / removeClass:

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

Answer 5

Voici un exemple de la façon de le faire sans plugin: jQuery animation Box mais il ne possède pas la fonctionnalité supplémentaire qui vient avec l'utilisation d'un plug-in, mais je personnellement voir (et comprendre) la méthode derrière la folie.