[번역] jquery 기본 자습서(jquery fundamentals) - (섹션 6) Jquery 효과

 
Jquery 기본 자습서
저자 Rebecca Murphey
원본 링크 주소http://jqfundamentals.com/
With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.
Copyright © 2011
 
 
 
jquery 효과
개술
jquery는 페이지에 간단한 효과를 추가하는 것을 작은 일로 만들었습니다.이런 효과는 내장된 설정이나 지속적인 맞춤형 제작으로 실현할 수 있다.
jquery 효과에 대한 자세한 정보를 얻으려면 http://api.jquery.com/category/effects/를 방문하십시오.
기본 제공 효과
자주 사용하는 일부 효과는 대부분 방법의 형식으로 jquery에 내장되어 있다.
$.fn.show
선택한 요소 표시
$.fn.hide
선택한 요소 숨기기
$.fn.fadeIn
선택된 요소의 투명도를 점진적으로 100%로 향상
$.fn.fadeOut
선택된 요소의 투명도를 0%까지 점진적으로 향상
$.fn.slideDown
선택한 요소를 수직으로 슬라이딩하여 표시합니다.
$.fn.slideUp
선택한 요소를 수직 슬라이딩으로 숨기기
$.fn.slideToggle
선택한 요소가 표시되는지 여부에 따라 수직으로 이동하여 선택된 요소를 숨기거나 표시합니다.
예6.1: 기본 내장 효과 활용

$('h1').show();

내장 효과 지속 시간 변경
$빼고.fn.show 및 $.fn.hide, 모든 내장된 방법의 자극 시간은 기본적으로 400ms입니다.효과의 지속 시간을 바꾸는 것은 매우 간단한 일이다.
예6.2: 효과 지속 시간 설정

$('h1').fadeIn(300);      // fade in over 300ms

$('h1').fadeOut('slow');  // using a built-in speed definition

jquery.fx.speeds
jquery는 기본 속도를 포함하는 Jquery입니다.fx.speeds에는'slow'와'fast'와 같은 대상이 있습니다.

speeds: {

    slow: 600,

    fast: 200,

    // Default speed

    _default: 400

}

이 대상을 다시 쓰거나 늘려도 된다.예를 들어 효과가 지속되는 기본 시간을 바꾸고 싶거나, 효과가 지속되는 시간을 만들고 싶다.
예6.3: 매개변수를 통해 사용자 정의 속도 정의 전달

jQuery.fx.speeds.blazing = 100;

jQuery.fx.speeds.turtle = 2000;

효과가 있을 때 뭘 해요?
일부 효과 애니메이션이 발효된 후에 코드를 실행하려고 할 때가 종종 있다. 만약 애니메이션이 발효되기 전에 실행한다면 애니메이션의 질에 영향을 주거나 애니메이션의 일부 요소를 제거할 것이다.[정의: 리셋 함수는 당신이 흥미를 느끼는 미래에 발생할 사건을 등록하는 방법을 제공한다] 이런 상황에서 우리가 응답할 사건은 애니메이션의 끝이다.리셋 함수 내부에서 키워드this는 호출된 효과가 있는 요소를 가리킨다.이벤트 프로세서 함수에서 했던 것처럼 $(this)를 통해 jquery 대상으로 변환합니다.
예6.4: 애니메이션이 끝날 때 코드 실행

$('div.old').fadeOut(300, function() { $(this).remove(); });

만약 당신의 선택 결과가 어떤 요소도 되돌아오지 않는다면, 당신의 리셋 함수는 영원히 실행되지 않을 것입니다.너는 너의 선택 결과에 원소가 있는지 검사함으로써 이 문제를 해결할 수 있다.만약 문제가 없다면, 바로 리셋 함수를 실행하면 된다.
예6.5: 요소가 애니메이션을 생성하지 않아도 리셋 함수를 실행합니다

var $thing = $('#nonexistent');

var cb = function() {

    console.log('done!');

};

if ($thing.length) {

    $thing.fadeIn(300, cb);

} else {

    cb();

}

$.fn.animate 사용자 정의 효과
jquery 통과$.fn.animate는 임의의 css 속성 생성 효과를 가능하게 합니다. $.fn.animate 방법은 설정 값이나 현재 값과 관련된 값을 활성화시킬 수 있습니다.
예6.6: $.fn.animate 사용자 정의 효과

$('div.funtimes').animate(

    {

        left : "+=50",

        opacity : 0.25

    },

    300, // duration

    function() { console.log('done!'); // calback

});

주석:
색상 맞춤 제작은 $을(를) 우연히 통과할 수 없습니다.fn.animate로 생성됩니다.색의 생성은 색 컨트롤을 통해 쉽게 이루어질 수 있습니다. 우리는 컨트롤 1절에서 이 문제를 상세하게 토론할 것입니다.
허용 위치
[정의: 용위는 효과가 발생하는 규범인 변화율이 안정적인지, 애니메이션의 지속 시간이 손실되었는지를 설명한다] jquery는 두 가지 용위의 방법을 포함한다. 그것이 바로 스윙과linear이다.애니메이션을 더 자연스럽게 필터하고 싶다면, 다양한 플러그인을 선택할 수 있습니다.
jquery 1.4중, 당신이 $를 사용한다면.fn.animate 방법을 사용할 때 용량의 예비 속성을 사용할 수 있습니다.
예6.7: 비트 프리 속성

$('div.funtimes').animate(

    {

        left : [ "+=50", "swing" ],

        opacity : [ 0.25, "linear" ]

    },

    300

);

용위 방법에 대해 더 알고 싶으면 방문http://api.jquery.com/animate/.
관리 효과
jquery는 애니메이션을 관리하는 데 사용할 수 있는 몇 가지 도구 방법을 제공합니다.
$.fn.stop
현재 선택 결과에서 애니메이션 실행 차단
$.fn.delay
다음 애니메이션을 실행하기 전에 특정 시간을 기다립니다.

$('h1').show(300).delay(1000).hide(300);

jquery.fx.off
값이 정확하면 애니메이션이 필터링되지 않습니다.요소가 즉시 대상 상태로 설정됩니다.이 방법은 오래된 브라우저의 문제를 처리할 때 매우 유용하다.물론 너도 너의 사용자에게 이 방법을 제공할 수 있다.
연습하다
숨겨진text 풀기
브라우저에서/exercises/index를 엽니다.html./exercises/js/blog을 사용합니다.js 파일.너의 임무는 페이지에 있는 블로그의 장과 절에 상호작용을 추가하는 것이다.특성은 다음과 같습니다.
   1.div 태그(#blog)의 제목을 클릭하면 요약 단락이 수직으로 슬라이딩됩니다.
   2.다른 제목을 클릭하면 요약 단락이 수직으로 미끄러지고 다른 요약 단락의 효과가 숨겨집니다.
알림:잊지 마세요:visible 선택기
드롭다운 디렉토리 만들기
브라우저에서/exercises/index를 엽니다.html./exercises/js/navigation을 사용합니다.js 파일.당신의 임무는 페이지의 맨 위에 메인 내비게이션에 하단 디렉터리를 추가하는 것입니다.
   1.마우스가 항목을 지나갈 때, 홈 디렉터리에 하위 디렉터리 항목을 표시합니다.
   2.홈 디렉터리를 종료하면 모든 하위 디렉터리를 숨깁니다
이 임무를 완수하기 위해서, 당신은 달러를 사용할 수 있습니다.fn.hover 방법은 하위 디렉터리 항목에서class를 추가하거나 제거해서 표시하거나 숨길지 여부를 제어합니다.(/exercises/scc/styles.css에 이 효과에 대해 호버를 제공하는class 포함)
슬라이드 쇼 만들기
브라우저에서/exercises/index를 엽니다.html./exercises/js/slideshow를 사용합니다.js 파일.일반적인 html 페이지를 만들고 자바스크립트를 통해 슬라이드 쇼를 추가해서 풍부하게 하는 것이 당신의 임무입니다.
   1.#slideshow 요소를 바디의 맨 위로 이동합니다.
   2.코드 중복 순환 요소 내부의 목록 항목 쓰기;한 항목에 담그고 몇 초 동안 보여준 다음 담그고 다음 항목에 담그면 순환합니다.
   3.목록의 끝까지 순환할 때 처음부터 다시 실행합니다.
진일보한 도전을 위해 슬라이드 아래에 내비게이션 표시줄을 만들어서 몇 개의 그림과 그 그림이 조회되고 있는지 보여 줍니다.(팁: $.fn.prevAll이 이 도전에 도움이 될 것입니다)