jQuery 또는 CSS3 전환을 사용하여 CSS 상자 그림자 깊이를 어떻게 애니메이트합니까?

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은 요소의 다른 속성을 변경하지 않는 경우 (또는 해당 속성 변경 사항을 애니메이션으로 적용하려는 경우) 크게 중요하지 않습니다. 데모에서 나는 두 box-shadows를 사용하는 것이 http://jsfiddle.net/jasper/tvfPq/1/

참고 : -

JS 여기

$(function() { 

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

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

는 데모입니다 box-shadow : 0 0 24px #000, inset 0 0 24px #999;

Answer 2

JQuery와 플러그인은 최근에이 작업을 수행하는 릴리스되었습니다. 최대치를 취하십시오 : Shadowmation