간격을 사용하여 자바 스크립트를 사용하여 여러 속성 변경 중?

Question

jQuery Glow 또는 this fiddle과 비슷한 것을 얻으려고합니다.

특히 100 밀리 초 간격으로 실행되는 자바 스크립트로로드 및 지속 시간을 10 초로 생각했습니다. 일어날 일은 배경색 또는 요소 A가 그라디언트 범위 (시작 번호 000 및 끝 #fff)를 사용하여 변경되고 요소 B의 불투명도가 변경되는 것입니다 (시작 0과 끝 1). 따라서 100 밀리 초마다 불투명도가 1 (0.01, 0.02, ..., 1.0) 씩 증가하고 종료됩니다. while 요소 A의 배경은 # 000에서 #fff까지 그라데이션을 따라 단계를 밟습니다.

jQuery Glow를 통해이 기능이 너무 어려워서는 안되지만 함께 결합하면 직관력이 입증되지 않습니다. js는 호버링과 링크에 꽤 적합하게 보이며 onLoad를 다른 값으로 정의하지 않고 미리 정해진 시간에 끝납니다.

어떻게하면됩니까? 감사.

Answer 1

setTimeout은 더 이상 자바 스크립트 애니메이션에서만 사용할 수있는 옵션이 아닙니다.

Paul Irish가 HTML5Rocks에서 setAnimationFrame을 확인하십시오. 약 here에 대해 읽어보십시오.

매끄러운 60 프레임/초.

Scroll this page 및 ...

리플 칠 루프 발생을 회피 애니메이션; rAF 호출을 업데이트하여 첫 번째 매개 변수로 고해상도 타임 스탬프가 필요합니다. requestAnimationFrame API :

마지막으로,

이시의 전체 개요를 얻기 지금 sub-millisecond precision

는 또한, 여기서 nnnnnn가 올바른지와 함께. jQuery의 주요 장점은 효과입니다.

그러나 jQuery뿐 아니라 JSWorld에 더 많은 것이 있습니다.

처음에는 CreativeJS.com을 확인하십시오.

WebGL이지만 더 중요한 것은 three.js입니다 (@mrdoob을 따르십시오).

ExtJS은 단순한 엔터프라이즈 급 UI, 애니메이션 상호 작용입니다.

Raphael은 현재 가장 진보 된 SVG입니다.

언급 할만한 다른 그래픽 솔루션은 D3.js, HTML5 Canvas 및 CSS3 Transforms입니다.

편집 : I thought Adobe Edge was cool.비평가는 베타 버전의 비 의미 론적 DIV를 지나칠 수 없었습니다. 키 프레임 인터페이스를 사용하여 HTML 애니메이션 생성에서 완전히 새로운 은유입니다. 나는 우리가 그 팀으로부터 좀 더 진보 된 HTML 애니메이션 생성기에 대해 더 많이 듣게 될 것이라고 생각한다 ... Yup, they got some new stuff!

희망이있다. 최고! 내시

Answer 2

Fading Effects을 시도하고 setTimeout과 함께 사용하십시오. 조금만 실험하면 좋을 것 같습니다.