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);
});
기본 예시
예제 보기참고
W3C School - jQuery Effects - Fading
jQuery 시작하기
공부 목적 블로그