2009-11-12 2 views
1

나는 페이드를하는 법과 자바 스크립트에서 비슷한 효과를 배우고 싶다. Jquery, mootools 등을 사용하지 않는 이유는 무엇입니까? 음, 나는 어떻게 물건이 작동하는지 배우고 싶습니다. 그런 다음이 프레임 워크 중 하나를 사용하는 것은 마음에 들지 않습니다.Fx on Javascript : 프레임 워크없이 물건 등을 퇴색시키는 방법?

저는 현재 DOM을 변경하는 방법에 대해 배우고 있습니다. 따라서이 주제에 많은 자료를 읽었습니다. 또한 리플 로우에 대해 읽었습니다. 아직도 리 페인팅에 멋진 정보를 찾지 못했지만 계속 검색 할 것입니다.

소스 파일을 보는 것에서부터 몇 가지 방법을 볼 수 있습니다. 만약 그들이 을 만들었거나 JS의 핵심 메소드 인 경우에는 알 수 없습니다.

내 질문은,이 모든 것들을 부드럽게 위치 변경, 페이딩 요소 물마루 불투명도 또는 무엇이든지 등등과 같이 깔끔한 것들을 배울 수있는 리소스가 있습니까?

답변

1

여기 파이어 폭스와 크롬에서 작동하는 예입니다. 즉 불투명도 스타일을 존중하지 않습니다.

var ELEMENT; 
    var STEPS; 
    var INTERVAL; 
    var COUNT; 
    var TIMERID; 

    // 5 * 200ms = 1 second 
    STEPS = 5; 
    INTERVAL = 200; 

    function Button1_onclick() { 

     ELEMENT = document.getElementById("foo"); 
     COUNT = STEPS - 1; 
     TIMERID = setInterval(Fade, INTERVAL); 
    } 

    function Fade() { 

     ELEMENT.style.opacity = String(COUNT/STEPS); 
     COUNT--; 

     if (COUNT < 0) { 
      clearInterval(TIMERID); 
      TIMERID = 0; 
     } 
    } 

하여 setInterval 및 위해 clearInterval 표준 JS 기능입니다. 그들은 주어진 함수를 매 x 밀리 초마다 실행할 것입니다. 우리의 경우에는 불투명도가 0이 될 때 그것을 죽인다.

창이 슬라이딩하는 과정은 비슷한 과정입니다. 불투명도가 아닌 왼쪽/오른쪽/위/아래 스타일을 설정합니다.

+0

와우! 고마워, 잘 생각 : D 조 – punkbit

0

자바 스크립트를 사용하여 페이드하는 것은 기본적으로 프로그래밍 방식으로 요소의 불투명도를 수정하는 것입니다. "부드러움"은 타이머를 사용하여 수행됩니다. 위치/크기 변경시 동일합니다. 원하는 효과를 위해 javascript를 사용하여 제어해야하는 요소의 스타일 속성을 이해하려면 css를 읽어야합니다. 당신이 정말로 호기심 경우

, 당신은 GitHub의에서 유이의 소스로 다이빙을 할 수 있습니다 http://github.com/yui

+0

안녕! 나는 CSS가 멋지다. 나는 자바 타이머를 점검 할 것이다. 그게 내가 알아 내려고 노력한 것입니다.) 감사합니다 – punkbit

2

emile.js을 살펴보십시오. 그것은 브랜드의 새로운 스팽킹. 자신 만의 방법을 배우는 좋은 방법입니다.

최근 jsconf 컨퍼런스에서 소개되었습니다. Thomas Fuchs (script.aculo.us) 글.

http://github.com/madrobby/emile

에밀 독립형 CSS 애니메이션

는 자바 스크립트 프레임 워크를 애니메이션 CSS 속성의

전체 집합을 필요하지 않습니다

자바 스크립트 미니 프레임 워크 (길이 기반 및 색상)

이징 및 콜백

코드

의 50 개 라인

보다

이하 받기 트위터에 업데이트 : http://twitter.com/emilejs