jQuery 효과 - 흐림 투명

jQuery를 통해 요소의 흐림 효과를 구현할 수 있습니다.

효과 시연

여기를 클릭하여 패널을 숨기거나 보여줍니다

일시백금일, 따라서, 빠르고 이해하기 쉬운 학습 내용을 제공해 드립니다.

여기서는 이해하기 쉬운 편리한 모드를 통해 필요한 모든 지식을 얻을 수 있습니다.

예제

jQuery fadeIn()
jQuery fadeIn() 메서드를 보여줍니다。
jQuery fadeOut()
jQuery fadeOut() 메서드를 보여줍니다。
jQuery fadeToggle()
jQuery fadeToggle() 메서드를 보여줍니다。
jQuery fadeTo()
jQuery fadeTo() 메서드를 보여줍니다。

jQuery Fading 메서드

jQuery를 통해 요소의 흐림 효과를 구현할 수 있습니다.

jQuery는 다음과 같은 네 가지 fade 메서드를 가집니다：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 메서드

jQuery fadeIn()은 숨겨진 요소를 나타내는 데 사용됩니다.

문법:

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

선택 사항 , 매개변수는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.

선택 사항 callback 매개변수는 흐림이 완료된 후 실행할 함수 이름입니다.

다음 예제는 다양한 매개변수를 가진 fadeIn() 메서드를 보여줍니다：

예제

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

본인이 직접 시도해보세요

jQuery fadeOut() 메서드

jQuery fadeOut() 메서드는 보이는 요소를 지우는 데 사용됩니다.

문법:

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

선택 사항 , 매개변수는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.

선택 사항 callback 매개변수는 흐림이 완료된 후 실행할 함수 이름입니다.

아래의 예제는 다양한 매개변수를 가진 fadeOut() 메서드를 보여줍니다:

예제

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

본인이 직접 시도해보세요

jQuery fadeToggle() 메서드

jQuery fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 간을 전환할 수 있습니다.

요소가 이미 흐림 상태가 아니라면 fadeToggle()은 요소에 흐림 효과를 추가합니다.

요소가 이미 흐림 상태라면 fadeToggle()은 요소에 흐림 효과를 추가합니다.

문법:

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

선택 사항 , 매개변수는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.

선택 사항 callback 매개변수는 흐림이 완료된 후 실행할 함수 이름입니다.

아래의 예제는 다양한 매개변수를 가진 fadeToggle() 메서드를 보여줍니다:

예제

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

본인이 직접 시도해보세요

jQuery fadeTo() 메서드

jQuery fadeTo() 메서드는 주어진 불투명도(0과 1 사이의 값)로 점진적으로 변환할 수 있습니다.

문법:

$(selector).fadeTo(,,opacity,callback);

필수적인 speed 매개변수는 효과의 지속 시간을 정의합니다. 다음 값 중 하나를 선택할 수 있습니다: "slow", "fast" 또는 밀리초.

fadeTo() 메서드에서 필수적인 opacity 매개변수는 흐림 효과를 주어진 불투명도로 설정합니다(0과 1 사이의 값).

선택 사항 callback 매개변수는 함수가 완료된 후 실행할 함수 이름입니다.

아래의 예제는 다양한 매개변수를 가진 fadeTo() 메서드를 보여줍니다:

예제

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

본인이 직접 시도해보세요

jQuery 효과 참조 매뉴얼

jQuery 효과를 전면적으로 확인하려면 우리의 jQuery 효과 참조 매뉴얼。