modo corretto per animare box-ombra con jQuery

Question

Qual è la sintassi corretta per animare la box-shadow di proprietà con jQuery?

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

Answer 1

Risposta diretta

Utilizzo di Edwin Martin plugin jQuery per ombra animazione , che si estende il metodo .animate, si può semplicemente utilizzare la sintassi normale con "boxShadow" e ogni aspetto di quella - color , x ed y-offset , la sfocatura-radius e spread-radius - si anima. Include il supporto ombra multipla.

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

---

Usare le animazioni CSS anziché

jQuery Animates modificando la proprietà style di elementi DOM, che può causare sorprese con specificità e le informazioni si muove stile fuori dei fogli di stile.

Non riesco a trovare le statistiche di supporto del browser per l'animazione CSS ombra, ma si potrebbe considerare l'utilizzo di jQuery per applicare un classe di animazione a base di , invece di gestire l'animazione direttamente. Ad esempio, è possibile definire un'animazione box-shadow nel foglio di stile:

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

È quindi possibile utilizzare l'evento animationend nativo per sincronizzare la fine dell'animazione con quello che stavi facendo nel codice JS:

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

Answer 2

Se si sta utilizzando jQuery 1.4.3+ allora è possibile usufruire del codice cssHooks che è stato aggiunto.

Utilizzando il gancio boxShadow: https://github.com/ brandonaaron / jquery-cssHooks / blob / master / boxshadow.js

Si può fare qualcosa di simile:

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

Il gancio non consentono di animare il colore ancora, ma sono sicuro che con un po 'di lavoro che potrebbe essere aggiunto.

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

Answer 3

Se non si desidera utilizzare un plugin, si può fare con un po 'di 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/

Se si vuole una documentazione completa su animazioni CSS, il tuo percorso di magia inizia qui ..

Answer 4

Mi piace la soluzione ShaneSauce! Utilizzare una classe intead di un ID e si può aggiungere / rimuovere l'effetto a qualsiasi elemento utilizzando jQuery addClass / delay / removeClass:

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

Answer 5

Ecco un esempio di come farlo senza un plugin: jQuery animato Box ma non ha la funzionalità extra che viene fornito con l'uso di un plugin, ma io personalmente come vedere (e capire) il metodo dietro la follia.