jQuery 효과 - 페이딩

jQuery 효과 - 페이딩

jQuery fadeIn()
jQuery fadeIn() 메소드를 보여줍니다.

jQuery fadeOut()
jQuery fadeOut() 메소드를 보여줍니다.

jQuery fadeToggle()
jQuery fadeToggle() 메소드를 보여줍니다.

jQuery fadeTo()
jQuery fadeTo() 메소드를 보여줍니다.

 

 

jQuery 페이드인() 메서드

Syntax:

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

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다.

 

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

 

 

jQuery 페이드아웃() 메서드

jQuery fadeOut()메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.

 

Syntax:

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

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다.

 

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

 

 

 

jQuery fadeToggle() 메서드

jQuery 메소드는 및 메소드 fadeToggle()사이를 토글 합니다.fadeIn()fadeOut()

요소가 페이드 아웃 fadeToggle()되면 페이드 인됩니다.

요소가 페이드 인 fadeToggle()되면 페이드 아웃됩니다.

 

Syntax:

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

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 페이딩이 완료된 후 실행되는 함수입니다.

 

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

 

 

 

jQuery fadeTo() 메서드

 

jQuery fadeTo()메소드는 주어진 불투명도(0과 1 사이의 값)로 페이드를 허용합니다.

 

Syntax:

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

필요한 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.

메서드 의 필수 불투명도 매개변수는 fadeTo()지정된 불투명도(0과 1 사이의 값)로 페이딩을 지정합니다.

선택적 콜백 매개변수는 함수가 완료된 후 실행할 함수입니다.

 

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