이펙트 메소드 hide( ), show( ), fadeIn( ), fadeOut( ), slideDown( ), slideUp( ), fadeTo( )

지금껏 나는 애니메이션을 구현할 때 CSS3에서 animation과 keyframes를 활용하고

이벤트 발생은 :hover, :active 같은 가상 클래스를 이용하는 방법밖에는 할 줄 몰랐다.

 

그러나 Java Script와 JQuery를 배우고 있는 이상, 이제는 좀 더 동적이고, 다양한 방식으로

애니메이션이나 이펙트를 부여할 수 있게 되었다.

 

초기 상태

 

hide 버튼을 클릭하니 1번 div가 사라지고 show 버튼으로 바뀐 모습

hide, fadeOut, slideUp, fadeToZero 버튼을 모두 클릭했을때의 상태

 

이전 상태에서 fadeIn, fadeToOne 버튼만 클릭했을때의 상태