Правильний спосіб анімації box-shadow за допомогою jQuery

Question 1

Який правильний синтаксис для анімації властивості box-shadow за допомогою jQuery?

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

Question 2

Пряма відповідь

Використання Едвіна Мартіна JQuery плагін для тіньової анімації , який розширює .animateметод, ви можете просто використовувати звичайний синтаксис з «boxShadow» і кожен аспект цього - колір , в х- і у-зміщення , тим розмиття радіусу і поширення радіуса - отримує анімацію. Він включає підтримку декількох тіней.

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

Замість цього використовуйте анімацію CSS

jQuery анімує, змінюючи styleвластивість елементів DOM, що може викликати сюрпризи зі специфічністю та переміщує інформацію про стиль із таблиць стилів.

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

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

Question 3

Якщо ви використовуєте 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/

Question 4

Якщо ви не хочете використовувати плагін, це можна зробити за допомогою трохи 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, ваш шлях до майстерності починається тут ..

Question 5

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

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

Question 6

Ось приклад того, як це зробити без плагіна: jQuery animated Box Але він не має додаткової функціональності, яка поставляється з використанням плагіна, але мені особисто подобається бачити (і розуміти) метод божевілля.