jQuery] 애니메이션 효과

hide( ), show( ), toggle( ) 

hide( ): 숨기기 기능 

웹사이트 - before

jquery

h1 클릭시 h1 숨김

 

웹사이트 - after   버튼 클릭하니까 h1 없어짐

 

 

show( ): 숨은 글자 다시 보이게 하기 

 

toggle( ): 접었다 폈다하기 

접었다 폈다 토글하기

버튼 눌렀을 때 h1이 생겼다 사라졌다하기 

 

 

fadeOut( ), fadeIn( ), fadeToggle( )

fadeOut() : 천천히 사라짐

fadeIn(): 천천히 나타남

fadeToggle( ):  fade in, fade out 됨

 

 

slideUp( ), slideDown( ), slideToggle( ) 

slideUp( ): 아래에서 위로 접힘

slideDown( ): 위에서 아래로 펴짐

slideToggle( ): 위 아래로 접었다 펴졌다함

 

 

 

 

animate( { css내용 } )

숫자 벨류를 갖는 css 내용을 입력하면 작동한다. 

그래서 color 변경은 되지 않는다.  

버튼 누르면 h1의 투명도를 반으로 줄임

before

after

 

 

 

 chain 

같은 타겟에 1개 이상 효과 주고 싶으면 체인으로 엮어서 효과 줄 수있다.