-
[jQuery] 6. Fading - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:15jQuery Effects - Fading
1. jQuery Fading Methods
jQuery에서 요소의 가시성을 나타내게 하거나 사라지게 할 수 있습니다:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
2. jQuery fadeIn() Method
fadeIn() 메소드는 사라진 요소를 희미하게 나타냅니다.
문법:
$(selector).fadeIn(speed,callback);예제:
123456789101112131415161718192021222324252627<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script></head><body><p>Demonstrate fadeIn() with different parameters.</p><button>Click to fade in boxes</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>cs 3. jQuery fadeOut() Method
fadeOut 메소드는 보여진 요소를 희미하게 사라지게 합니다.
문법:
$(selector).fadeOut(speed,callback);예제:
123456$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});cs 4. jQuery fadeToggle() Method
fadeToggle() 메소드는 fadeIn()과 fadeOut()메소드 사이를 토글합니다.
문법:
$(selector).fadeToggle(speed,callback);예제:
1234567891011121314151617181920212223242526272829<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script></head><body><p>Demonstrate fadeToggle() with different speed parameters.</p><button>Click to fade in/out boxes</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>cs 5. jQuery fadeTo() Method
fadeTo() 메소드는 희미해짐의 정도를 주는 것을 허용합니다.
문법:
$(selector).fadeTo(speed,opacity,callback);예제:
12345678910111213141516171819202122232425262728<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeTo("slow", 0.15);$("#div2").fadeTo("slow", 0.4);$("#div3").fadeTo("slow", 0.7);});});</script></head><body><p>Demonstrate fadeTo() with different parameters.</p><button>Click to fade boxes</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>cs 'Web > jQuery' 카테고리의 다른 글
[jQuery] 9. Stop Animation - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 8. 애니메이션(Animation) - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 7. Sliding - jQuery 강좌 (0) 2015.06.13 [jQuery] 5. 보이기 / 숨기기(Hide / Show) - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 4. 이벤트 메소드(Event method) - jQuery 강좌 (0) 2015.06.13 [jQuery] 3. 선택자(selector) - jQuery 강좌 (0) 2015.06.13
