여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. jQuery - Effects - Fade
jQuery – Effects – Fade
7개월전 작성
7개월전 수정

Fade

jQuery를 사용하면 요소의 가시성을 페이드 인하거나 페이드 아웃할 수 있다.

fadeIn()

jQuery fadeIn() 메서드는 숨겨진 요소를 페이드 인하는 데 사용된다.

형식
$(selector).fadeIn(speed,callback);
매개변수
speed
:
효과의 지속 시간을 지정한다. “느림”, “빠름” 또는 밀리초 값을 사용할 수 있다. 선택 사항.
callback
:
페이딩이 완료된 후 실행되는 함수다. 선택 사항.
예제
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
기본 예시
예제 보기

fadeOut()

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

형식
$(selector).fadeOut(speed,callback);
매개변수
speed
:
효과의 지속 시간을 지정한다. “느림”, “빠름” 또는 밀리초 값을 사용할 수 있다. 선택 사항.
callback
:
페이딩이 완료된 후 실행되는 함수다. 선택 사항.
예제
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
기본 예시
예제 보기

fadeToggle()

jQuery fadeToggle() 메서드는 fadeIn() 및 fadeOut() 메서드 사이를 전환한다.

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

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

형식
$(selector).fadeToggle(speed,callback);
매개변수
speed
:
효과의 지속 시간을 지정한다. “느림”, “빠름” 또는 밀리초 값을 사용할 수 있다. 선택 사항.
callback
:
페이딩이 완료된 후 실행되는 함수다. 선택 사항.
예제
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
기본 예시
예제 보기

fadeTo()

jQuery fadeTo() 메서드를 사용하면 지정된 불투명도(0에서 1 사이의 값)로 페이딩할 수 있다.

형식
$(selector).fadeTo(speed,opacity,callback);
매개변수
speed
:
효과의 지속 시간을 지정한다. “느림”, “빠름” 또는 밀리초 값을 사용할 수 있다.
opacity
:
fadeTo()지정된 불투명도(0과 1 사이의 값)로 페이딩되도록 지정한다.
callback
:
페이딩이 완료된 후 실행되는 함수다. 선택 사항.
예제
$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});
기본 예시
예제 보기
참고

Mingg`s Diary
밍구
공부 목적 블로그