display속성 메소드 - fadeIn, fadeOut, fadeTo, fadeToggle

fadeIn : 점점 진하게 변하면서 보여지는 효과

fadeOut : 점점 희미하게 변하면서 사라지는 효과

fadeTo : 설정한 값까지 희미해지는 효과(opacity값으로 투명도 조절)

fadeToggle : fadeIn과 fadeOut을 동시에 적용하는 메소드

 

fadeTo는 사용 방법이 다름

opacity를 명시해주어야함

$('선택자').fadeIn/fadeOut/fadeToggle(speed, easing, callback);

$('선택자').fadeTo(speed, opacity, easing, callback);

speed : 실행 속도(밀리세컨초) / 숫자 or slow, fast

easing : 변경 되는 지점별 속도 / linear, swing 등 기능

callback : 메소드 실행 후 실행할 함수

 

 

 

fadeIn(), fadeOut() method

ex.

 

 

 

 

 

fadeToggle() method

fadeIn() + fadeOut() = fadeToggle()

ex.

버튼 하나에 fadeToggle() 후 alert 띄워보기

 

 

 

 

 

 

fadeTo() method

ex.

hover 이벤트 이용해 fadeTo 투명도 테스트

 

마우스가 들어갈 때 투명도 1

마우스가 나올 때 투명도 0.4