계단식 애니메이션

Question

동일한 애니메이션을 요소 집합에주고 싶지만 점진적으로 지연되어 애니메이션이 일종의 '웨이브'를 만듭니다.

나는 그것에 관해 수수께끼를 만들었다. http://jsfiddle.net/ttLJ3/

기본적으로 각 요소는 50ms 단위로 지연되고, 일을하고, 300ms를 기다렸다가 실행을 취소합니다.

그냥 작동하지 않는 것 같습니다. 그것은 아무것도하지 않습니다. .delay(300).show()을 제거하면 모든 요소가 즉시 사라집니다.

어떻게하면됩니까? 미리 감사드립니다! :)

Answer 1

여기에서 문제를 해결할 수있었습니다. fx queue와

http://jsfiddle.net/ttLJ3/1/

delay 이후 작품, 당신은 지연 그렇지 않으면 숨기기 및 표시 방법이 바로 실행됩니다 작동하는 종류의 정수를 전달해야합니다. 마치 아무 일도 일어나지 않는 것처럼 보이게 만듭니다. 문제를 해결하기 위해 hide 및 show 호출 각각에 0을 전달했습니다.

$(this).delay(50 * index).hide(0).delay(300).show(0); 

Answer 2

는 .hide() doco에 따르면, "지속 기간이 제공되며, .hide()는 애니메이션 방법이된다." 분명히 이것은 애니메이션 큐에 숨김이 수행되지 않는 지속 시간을 제공하지 않으므로 .delay()과 작동하지 않는다는 것을 의미합니다.

그래서 .hide()와 .show()에 짧은 지속 시간을 추가하십시오 :

$(this).delay(50 * index).hide(1).delay(300).show(1); 

업데이트 데모 : http://jsfiddle.net/ttLJ3/2/