jQuery - Как анимировать свойство box-shadow?

Question

Приведенный ниже код пытается анимировать свойство css box-shadow.

$("button").click(function() { 
    $(this).animate(function() { 
    box-shadow: "10px 10px 0 0 green", //does not work 
    boxShadow: "10px 10px 0 0 green", //does not work 
    boxshadowX: "200px" //does not work 
    }); 
}); 

Приведенный выше код не работает. Возможно ли анимировать свойство box-shadow внутри функции animate? Если невозможно, что другие альтернативы могут сделать то же самое?

Answer 1

Прежде всего, ваш синтаксис неверен.

Во-вторых, возможно только оживить числовые значения, используя animate() в jQuery. Альтернативой может быть

$("button").click(function() { 
    $(this).css({ 
     box-shadow: "10px 10px 0 0 green", 
     boxShadow: "10px 10px 0 0 green", 
     boxshadowX: "200px" 
    }); 
}); 

затем в вашем CSS

button 
{ 
    transition: all .8s; /* add vendor prefixes*/ 
} 

Answer 2

эта скрипка может помочь you.This несколько связано с моей проблемой несколько дней назад.

$(document).ready(function() { 
$("button").click(function(){ 
    $(this).toggleClass("click"); 

}); 

});

см эта демка

http://jsfiddle.net/TUFPU/6/