Правильный способ анимации box-shadow с помощью jQuery

Прямой ответ

Использование плагина jQuery Эдвина Мартина для анимации теней, который расширяет метод .animate, вы можете просто использовать обычный синтаксис с "boxShadow" и всеми его аспектами - цветом, смещением по x и y, размытием -radius и spread-radius — анимируются. Он включает поддержку нескольких теней.

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

Вместо этого используйте анимацию CSS

jQuery анимирует, изменяя свойство style элементов DOM, что может привести к неожиданностям со специфичностью и перемещению информации о стиле из ваших таблиц стилей.

Я не могу найти статистику поддержки браузерами анимации теней CSS, но вы можете использовать jQuery для применения класса на основе анимации вместо того, чтобы обрабатывать анимацию напрямую. Например, вы можете определить анимацию box-shadow в своей таблице стилей:

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

Затем вы можете использовать собственное событие animationend для синхронизации конца анимации с тем, что вы делали в своем JS-коде:

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

Если вы используете jQuery 1.4.3+, вы можете воспользоваться добавленным кодом cssHooks.

С помощью хука boxShadow: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

Вы можете сделать что-то вроде этого:

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

Крюк пока не позволяет вам анимировать цвет, но я уверен, что можно добавить некоторую работу.

Пример: http://jsfiddle.net/petersendidit/w5aAn/

Если вы не хотите использовать плагин, это можно сделать с помощью 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.*/

Проверьте это: http://jsfiddle.net/Z8E5U/

Если вам нужна полная документация по анимации CSS, ваш путь к волшебству начинается здесь..

Мне нравится решение ShaneSauce! Используйте класс вместо идентификатора, и вы можете добавить/удалить эффект для любого элемента, используя jQuery addClass/delay/removeClass :

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

Вот пример того, как это сделать без плагина: анимированный блок jQuery Но у него нет дополнительной функциональности, которая приходит с использованием плагина, но лично мне нравится видеть (и понимать) метод, стоящий за этим безумием.