Maneira correta de animar box-shadow com jQuery

Qual é a syntax correta para animar a propriedade box-shadow com jQuery?

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

    Resposta direta

    Usando o plugin jQuery de Edwin Martin para animação de sombras , que estende o método .animate , você pode simplesmente usar a syntax normal com “boxShadow” e todas as facetas – color , xe y-offset , blur-radius e spread- raio – fica animado. Inclui suporte a múltiplas sombras.

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

    Usando animações CSS

    O jQuery anima alterando a propriedade style dos elementos DOM, o que pode causar surpresas com especificidade e mover informações de estilo de suas folhas de estilo.

    Não consigo encontrar statistics de suporte ao navegador para animação de sombra CSS, mas você pode considerar o uso do jQuery para aplicar uma class baseada em animação em vez de manipular a animação diretamente. Por exemplo, você pode definir uma animação de sombra na checkbox de estilo:

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

    Você pode então usar a propriedade animationend nativa para sincronizar o final da animação com o que você estava fazendo no seu código JS:

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

    Se você estiver usando o jQuery 1.4.3+, poderá aproveitar o código cssHooks que foi adicionado.

    Usando o gancho boxShadow: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

    Você pode fazer algo assim:

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

    O gancho não permite que você anime a cor ainda, mas tenho certeza de que algum trabalho poderia ser adicionado.

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

    Se você não quiser usar um plugin, isso pode ser feito com um pouco 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.*/ 

    Confira: http://jsfiddle.net/Z8E5U/

    Se você quer documentação completa sobre animações CSS, seu caminho para a magia começa aqui.

    Eu amo a solução ShaneSauce! Use uma class em vez de um ID e você pode adicionar / remover o efeito para qualquer elemento usando jQuery addClass / delay / removeClass:

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

    Aqui está um exemplo de como fazer isso sem um plugin: jQuery checkbox animada Mas ele não tem a funcionalidade extra que vem com o uso de um plugin, mas eu pessoalmente gosto de ver (e entender) o método por trás da loucura.