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

который является правильным синтаксисом для анимации

73
box-shadow css3 jquery jquery-animate

5 ответов

прямого ответа

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

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

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

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

Я не могу найти статистику поддержки браузера для CSS shadow animation, но вы можете использовать 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;
}

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

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

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

30

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

14

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

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

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

0