web-dev-qa-db-fra.com

Façon correcte d'animer l'ombre de la boîte avec jQuery

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

$().animate({?:"0 0 5px #666"});
jquerycss3jquery-animatebox-shadow
74
chchrist

Réponse directe

Utilisation d'Edwin Martin plugin jQuery pour l'animation d'ombres, qui étend le .animate, vous pouvez simplement utiliser la syntaxe normale avec "boxShadow" et toutes ses facettes - color, le x- et y-offset, le blur-radius et spread-radius - s'anime. Il comprend plusieurs supports d'ombre.

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

Utiliser des animations CSS à la place

jQuery s'anime en modifiant la propriété style des éléments DOM, ce qui peut provoquer des surprises avec spécificité et déplacer les informations de style hors de vos feuilles de style.

Je ne trouve pas les statistiques de prise en charge du navigateur pour l'animation shadow CSS, mais vous pourriez envisager d'utiliser jQuery pour appliquer une animation basée sur - classe au lieu de gérer l'animation directement. Par exemple, vous pouvez définir une animation d'ombre de boîte 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 l'événement natif animationend 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...
});
74
iono

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

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

Vous pouvez faire quelque chose comme ça:

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

Le crochet ne vous permet pas encore d'animer la couleur mais je suis sûr qu'avec du travail qui pourrait être ajouté.

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

30
PetersenDidIt

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

Vérifiez-le: http://jsfiddle.net/Z8E5U/

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

14
ShaneSauce

J'adore la solution ShaneSauce! Utilisez une classe au lieu d'un ID et vous pouvez ajouter/supprimer l'effet à n'importe quel élément à l'aide de jQuery addClass/delay/removeClass:

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

Voici un exemple de comment le faire sans plugin: jQuery animated Box Mais il n'a pas les fonctionnalités supplémentaires qui viennent avec l'utilisation d'un plugin, mais j'aime personnellement voir (et comprendre ) la méthode derrière la folie.

0
Drazion