[ JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop) ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <head> <meta charset= "utf-8" > <title>animate 관련...</title> </head> <button type= "button" id= "button1" >BTN1</button> <p id= "p1" >BTN1</p> <button type= "button" id= "button2" >BTN2</button> <p id= "p2" >BTN2</p> <button type= "button" id= "button3" >BTN3</button> <p id= "p3" >BTN3</p> <button type= "button" id= "button4" >BTN4</button> <p id= "p4" >BTN4</p> <button type= "button" id= "button5" >BTN5</button> <p id= "p5" >BTN5</p> <button type= "button" id= "button6" >BTN5</button> <script type= "text/javascript" > // 1. $(선택자).hide(ms) : ms 시간에 걸쳐 사라짐(효과는 없음) $( "#button1" ).on( "click" ,function(event){ $( "#p1" ).hide( 200 ); }); // 2. $(선택자).show(ms) : ms 시간에 걸쳐 나타나게 함(효과 X) $( "#button1" ).on( "click" ,function(event){ $( "#p1" ).show( 200 ); // 0.2초에 걸쳐 나타남 }) // 3. $(선택자).toogle(ms) : ms초에 걸쳐 hide상태면 show하고 show상태면 hide상태로 바꿈 $( "#button1" ).on( "click" ,function(event){ $( "#p1" ).toogle( 200 ); }) // 4. $(선택자).fadeIn(ms) : ms 초에 걸쳐 점차적으로 나타남(효과가 O) $(document).on( "click" , "#button2" ,function(event){ // 동적으로 태그를 생성시에는 이런식으로 이벤트를 줘야함(그냥 써밧음...) $( "#p2" ).fadeIn( 2000 ); // 2초에 걸쳐 점차적으로 나타남 }) // 5. $(선택자).fadeOut(ms) : ms 초에 걸쳐 사라짐(효과O) $( "#button2" ).on( "click" ,function(event){ $( "#p2" ).fadeOut( 2000 ); }); // 6. $(선택자).fadeTo(ms,0~1) : ms동안 0~1 사이의 opacity(투명도) 상태가 됨 1은 완전히 보임 0은 아예 안보임 $( "#button3" ).on( "click" ,function(event){ $( "#p3" ).fadeTo( 2000 , 0.3 ); }) // 7. $(선택자).slideDown(ms) : ms초에 걸쳐 펼쳐지듯이 나타남 $( "#button4" ).on( "click" ,function(event){ $( "#p4" ).slideDown( 2000 ); }) // 8. $(선택자).slideUp(ms) : ms초에 걸쳐 접히는 효과로 사라짐 $( "#button4" ).on( "click" ,function(event){ $( "#p4" ).slideUp( 2000 ); }) /////////////////////////////////////////////////////////////////////////////////////////////// // 9. $(선택자).animate({css속성},ms) : ms초에 걸쳐 css 속성을 지정된 걸 차츰 적용함(애니메이션 효과) $( "#button5" ).on( "click" ,function(event){ $( "#p5" ).animate({margin-left:250px,color:red}, 5000 ).animate({margin-left:0px}, 3000 ); }); // 10. $(선택자).stop() : 수행중인 애니메이션 효과를 정지시킴 $( "#button6" ).on( "click" ,function(event){ $( "#p5" ).stop(); }); </script> |
'개발 > Javascript' 카테고리의 다른 글
클릭시 특정 태그 위치로 스크롤을 이동시키기 (1) | 2017.06.11 |
---|---|
이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기 (0) | 2017.06.11 |
4. script 선언의 위치?!! (0) | 2017.06.11 |
3. 일정주기마다 callback 함수를 실행하는 setInterval()에 대해서... (0) | 2017.06.11 |
2. JQuery로 선택한 태그 요소의 값과 속성을 바까보자 (3) | 2017.06.11 |