Правильный способ анимировать box-shadow с помощью jQuery - PullRequest
Новая
       44

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

73 голосов
/ 09 ноября 2010

Какой правильный синтаксис для анимации свойства box-shadow с помощью jQuery? 

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

Ответы [ 5 ]

73 голосов
/ 08 февраля 2012

Прямой ответ

Используя плагин 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 для применения класса на основе анимации вместо непосредственной обработки анимации.Например, вы можете определить анимацию 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...
});
30 голосов
/ 09 ноября 2010

Если вы используете 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/

14 голосов
/ 21 февраля 2014

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

3 голосов
/ 17 апреля 2015

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

$('.error').each( function(idx, el){
    $( el )
        .addClass( 'highlight' )
        .delay( 2000 )
        .removeClass( 'highlight' );
});
0 голосов
/ 08 мая 2012

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

...