jQuery fadeOut(), fadeIn()

jQuery Logo

 

fadeOut() / fadeIn()

 

.fadeOut( [ duration ], [ callback ] ) Returns: jQuery

.fadeOut( [ duration ], [ easing ], [ complete ] )

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

 

The fadeOut() method

 

Animates the opacity of the matched elements. 

Hides the matched elements by fading them to transparent.

Hidden elements will not be displayed at all.

 

1. Once the opacity reaches 0,

100% 투명하게 되면, 

2. the display style property is set to none,

CSS의 style display 속성이 none으로 변경되고, 

3. so the element no longer affects the layout of the page.

페이지 레이아웃에서 제외됩니다.

 

The fadeIn() method

 

fadeOut()의 reverse mode

 

---

- duration :

optional

a string or number determining how long the animation will run

애니메이션이 지속되는 시간 설정

 

milliseconds, 'slow', 'fast'

 

default duration: 400

'fast' : 200 milliseconds

'slow' : 600 milliseconds

※ 'fast'와 'slow'는 항상 따옴표로 감싸 줍니다.

---

- easing :

optional

Specifies the speed of the element in different points of the animation.

애니메이션 시작, 중간, 종료 지점의 가변 속도

 

'swing' : default. moves slower at the beginning/end, but faster in the middle
'linear' : moves in a constant speed

※ 'swing'과 'linear' 역시 항상 따옴표로 감싸 줍니다.

---

- callback (or complete) :

optional

a function to call once the animation is complete

The callback is fired once the animation is complete.

---

example-1

$("nav").fadeOut();

$("nav").fadeOut('slow');
$("nav").fadeOut('swing');
$("nav").fadeOut('slow', 'swing');
$("nav").fadeOut(800);

$("nav").fadeOut('slow', 'swing', function() {
	// function call after the animation completes.
});

 

example-2

$(".dropdown-menu").stop(true, true).fadeIn(100);

 

example-3

$header.fadeOut(400, function() {
	$banner.fadeIn(600);
});