如何動畫CSS盒陰影深度（使用jQuery或CSS3轉換）？

Question

這確實做了延誤，但似乎並沒有應用該樣式的變化，直到最後：

for (i=20;i>=0;i--) {    
    var boxShadow = i+"px "+i+"px "+i+"px #888"; 
    $('article').css("box-shadow", boxShadow); 
    sleep(20); 
} 
function sleep(ms) 
{ 
    var dt = new Date(); 
    dt.setTime(dt.getTime() + ms); 
    while (new Date().getTime() < dt.getTime()); 
} 

這完全不適用的拖延：

for (i=20;i>=0;i--) {    
    var boxShadow = i+"px "+i+"px "+i+"px #888"; 
    $('article').delay(500).css("box-shadow", boxShadow); 
} 

可以這樣做更多輕鬆與css3轉換？我只是在延遲樣本中做出一些小的jquery錯誤？

謝謝任何​​能夠幫助的人。

Answer 1

您可以使用類和setTimeout利用CSS3過渡爲您的動畫效果：

CSS -

#some-element { 
    -webkit-transition : all 0.5s linear; 
     -moz-transition : all 0.5s linear; 
     -ms-transition : all 0.5s linear; 
     -o-transition : all 0.5s linear; 
      transition : all 0.5s linear; 
} 
#some-element.ani-state { 
    -webkit-box-shadow : 0 0 24px #000; 
     -moz-box-shadow : 0 0 24px #000; 
      box-shadow : 0 0 24px #000; 
} 

我用all，因爲鉻的過渡聲明...鉻的一些版本使用-webkit-box-shadow和更新版本使用box-shadow。 all如果不更改元素的任何其他屬性（或者如果您想要動畫那些屬性更改），則不是什麼大問題。

JS -

$(function() { 

    var $someElement = $('#some-element'); 

    $someElement.on('click', function() { 
     $someElement.addClass('ani-state'); 
     setTimeout(function() { 
      $someElement.removeClass('ani-state'); 
     }, 500); 
    }); 
}); 

這裏是一個演示：http://jsfiddle.net/jasper/tvfPq/1/

注意，在演示中，我用了兩個box-shadows：box-shadow : 0 0 24px #000, inset 0 0 24px #999;

Answer 2

一個jQuery插件，最近發佈了這一點。以一個峯值：Shadowmation