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

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

$().animate({?:"0 0 5px #666"});
5 73
css3 jquery jquery-animate box-shadow

5 ответов:

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

используя плагин jQuery для теневой анимации, который расширяет .animate метод, вы можете просто использовать обычный синтаксис с "boxShadow" и каждый аспект этого -цвета на X - и y-смещение на размытие-радиус и 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...
});
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 animated Box но у него нет дополнительной функциональности, которая поставляется с использованием плагина, но мне лично нравится видеть (и понимать) метод, стоящий за безумием.

0