jQuery 효과 - 투명도 조절

jQuery는 다양한 놀라운 효과를 실행하기 위한 간단한 인터페이스를 제공합니다.

jQuery 효과 메서드는 최소의 설정으로 일반적인 효과를 빠르게 적용할 수 있게 합니다.

jQuery 투명도 조절 메서드

jQuery를 사용하여 투명도 조절 효과를 구현할 수 있습니다.

다음은 jQuery 투명도 조절 메서드가 있습니다：

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

다음 장에서 각 투명도 조절 메서드의 사용법을 보여드리겠습니다.

jQuery fadeIn()과 fadeOut()

jQuery fadeIn()메서드는 선택된 요소의 불투명도를 숨기게 만들기 위해 점진적으로 변경합니다.

jQuery fadeOut()메서드는 선택된 요소의 불투명도를 보이게 만들기 위해 점진적으로 변경합니다.

이 예제에서 fadeIn()와 fadeOut() 메서드의 사용법을 보여줍니다：

//　보이는 문단을 숨기게 만듭니다.
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　숨겨진 문단을 반짝이게 만듭니다.
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

이는fadeIn()메서드의 문법:

$(selector).fadeIn(duration, easing, callback);

이는fadeOut()메서드의 문법:

$(selector).fadeOut(duration,　easing,　callback);

무관하게fadeIn()및fadeOut()메서드는 세 가지 선택적 파라미터를 받아들입니다:

• 지속 -fadeTo() 효과가지속시간. 가능한 값: "slow", "fast" 또는 밀리초

• easing -이전환경을 사용하는지 지정합니다. 가능한 값: "swing", "linear"

• 콜백-메서드가 완료된 후 호출되는 함수를 지정합니다

아래의 예제는 fadeIn()과 fadeOut()를 사용하여지속파라미터:

$("#fadeout-btn").click(function(){
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
　　$("p").fadeIn(1500);
});

아래의 예제는 fadeIn()과 fadeOut()를 사용하여콜백파라미터:

$("#fadeout-btn").click(function(){
　　$("div").fadeOut(600,　function(){
　　　　$("h3").text("퇴장 완료.");
　　});
});
$("#fadein-btn").click(function(){
　　$("div").fadeIn(600,　function(){
　　　　$("h3").text("진입 완료.");
　　});
});

모든 범위(이 경우 단어)에 애니메이션을 적용하여 빠르게 희미화시키고,200밀리초 내에 각 애니메이션 처리를 완료합니다:

$("button").click(function(){
　　$("span:last-child").fadeOut("fast",　function(){
　　　　$(this).prev().fadeOut("fast",　arguments.callee);
　　});
});

jQuery fadeToggle() 메서드를 사용할 수 있습니다

저희는 또한fadeToggle()메서드는 HTML 요소의 진입 및 퇴장 사이를 전환합니다.

선택된 요소가 퇴장하면fadeToggle()그를 진입시킵니다.

선택된 요소가 진입하면fadeToggle()그들을 애니메이션으로 퇴장시킵니다.

다음 예제는 모든<p>요소의 진입 및 퇴장 사이를 전환합니다:

$("button").click(function(){
　　$("p").fadeToggle();
});

이는fadeToggle()메서드의 문법:

$(selector).fadeToggle(duration,　easing,　callback);

이fadeToggle()메서드는 세 가지 선택적 파라미터를 받아들입니다:

• 지속 -fadeTo() 효과가지속시간. 가능한 값: "slow", "fast" 또는 밀리초

• easing -이전환경을 사용하는지 지정합니다. 가능한 값: "swing", "linear"

• 콜백-메서드가 완료된 후 호출되는 함수를 지정합니다

jQuery fadeTo() 메서드

jQuery fadeTo()메서드는 선택된 요소의 불투명도를 지정된 불투명도로 점진적으로 변경합니다.

주의:이fadeTo()이 메서드는 페이지 레이아웃을 변경하지 않습니다(선택된 요소는 이전과 같은 공간을 차지합니다).

이 예제는 점진적으로 불투명도를 낮춥니다<div>요소의 불투명도:

$("button").click(function(){
　　$("div").fadeTo(500,　0.2);
});

이는fadeTo()메서드의 문법:

$(selector)fadeTo.(duration,　opacity,　easing,　callback)

파라미터:

• 지속 -fadeTo() 효과가지속시간. 가능한 값: "slow", "fast" 또는 밀리초

• 불투명도-다양하게 흐르는 불투명도를 지정. 0.00과1.00 사이의 숫자

• easing -（선택）이동에 사용할缓动 함수를 지정. 가능한 값: "swing", "linear"

• 콜백-（선택）fadeTo() 메서드가 완료된 후 호출되는 함수를 지정

아래 예제는 fadeTo()를 포함한콜백파라미터:

$("button").click(function(){
　　$("div").fadeTo(500, 0, function(){
　　　　alert("불투명도 감소!!!");
　　});
});

jQuery 효과 참조

완전한 효과 참조에 대한 자세한 정보는 우리의jQuery Effects 참조 가이드。