jQuery Effects - Sliding
1. jQuery Sliding Methods
jQuery로 요소에 sliding 효과를 만들 수 있습니다:
- slideDown()
- slideUp()
- slideToggle()
2. jQuery slideDown() Method
slideDown() 메소드는 요소를 slide down을 줍니다.
문법:
$(selector).slideDown(speed,callback);
| $("#flip").click(function(){ $("#panel").slideDown(); }); | cs
|
3. jQuery slideUp() Method
slideUp() 메소드는 요소를 slide up을 해줍니다.
문법:
$(selector).slideUp(speed,callback);
예제:
| $("#flip").click(function(){ $("#panel").slideUp(); }); | cs |
4. jQuery slideToggle() Method
slideToggle() 메소드는 slideDown()과 slideUp() 메소드 사이를 토글합니다.
문법:
$(selector).slideToggle(speed,callback);
예제:
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 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> </body> </html> | cs |
