Правильный способ анимации теневого окна с jQuery

Ответ 1

Прямой ответ

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

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

Использование CSS анимации вместо

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

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

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

Ответ 2

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

Используя hookShadow hook: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

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

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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