[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo())

jQuery Effects - Fading

 

jQuery는 희미하게 나타나게하고 없애는 fade() 메소드를 가지고 있습니다.

jQuery에서는 아래 4가지 fade() 메소드를 가지고 있습니다.

 

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

 

우선 fadeIn() 메소드에 대해서 알아보도록 하겠습니다.

jQuery fadeIn() Method

메소드 이름과 같게 희미하게 보여지게 해주는 메소드입니다. show() 메소드에 자동으로 speed가 적용된 느낌의 메소드입니다.

문법

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

전 강의에서 다뤘던 show() 그리고 hide () 메소드와 같은 인자를 가지고 있습니다. 속도나 콜백함수에 대해서 잘 모르시다면, 전 강의에서 다뤘던 설명을 한번 읽어보시면 될 것같습니다.

예제

fadeIn() 메소드를 통해서 box를 추가할 때마다 자동으로 box 클래스에 fadeIn메소드가 적용이 되는 기능을 한번 구현해봤습니다.

jQuery fadeOut() Method

fadeIn() 메소드와 반대로 동작하는 fadeOut() 메소드인데요.

적용한 요소를 희미하게 사라지게 해주는 기능을 가지고 있는 메소드입니다.

예제

fadeIn() 메소드와 결합해서 fadeOut() 메소드까지 사용해서 box가 자연스럽게 나타났다가 사라지게 해주는 기능을 구현해봤습니다.

여기에 Box가 사라지는 시간을 제어하고 싶다면, speed에 숫자나 slow / fast라는 단어를 넣어주면 쉽게 제어할 수 있습니다.

저는 count라는 변수를 생성해서 for 반복문으로 speed 매개변수를 제어했습니다.

이렇게 조금만 응용해도 깔끔한 기능을 구현할 수 있다는 것을 알려드리고자 반복문을 이용해서 설명을 드렸습니다.

jQuery fadeToggle() Method

전에 설명했던 show() 와 hide() 메소드에도 toggle() 메소드가 존재했었죠.

fadeIn() 과 fadeOut() 메소드에도 fadeToggle() 메소드가 존재합니다.

기능이 작동하는 방법은 toggle() 메소드 동작 방식 같습니다.

이번에는 반복문을 사용 안하고 가시적으로 이해하기 쉽게 코드를 작성해봤습니다.

jQuery fadeTo() Method

마지막으로 다룰 메소드는 fadeTo() 메소드입니다.

fadeTo() 메소드는 fading을 적용할 때 불투명도를 적용하게 도와줍니다. (값은 0과 1사이)

문법

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

fadeTo() 메소드는 인자로 속도, 불투명도, 콜백함수를 받을 수 있네요.

이렇게 박스가 출력될 때 불투명도를 조절해주는 역할을 담당하는 메소드랍니다.