효과란?
- 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다.
- jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.
예제1.
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 | <!DOCTYPE html><html> <head> <style> span { color:red; cursor:pointer; } div { margin:3px; width:80px; height:80px; } div { background:#f00; }</style> </head> <body> <input type="button" id="fadeout" value="fade out" /> <input type="button" id="fadein" value="fade in" /> <input type="button" id="hide" value="hide" /> <input type="button" id="show" value="show" /> <input type="button" id="slidedown" value="slide down" /> <input type="button" id="slideup" value="slide up" /> <input type="button" id="mix" value="mix" /> <div id="target"> target </div> <script>$('input[type="button"]').click( function(e) { var $this = $(e.target); switch($this.attr('id')) { case 'fadeout': $('#target').fadeOut('slow'); break; case 'fadein': $('#target').fadeIn('slow'); break; case 'hide': $('#target').hide(); break; case 'show': $('#target').show(); break; case 'slidedown': $('#target').hide().slideDown('slow'); break; case 'slideup': $('#target').slideUp('slow'); break; case 'mix': $('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')}); break; } }) </script> </body></html> |
예제2.
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 | <!DOCTYPE html><html> <head> <style> div { background-color:#bca; width:100px; border:1px solid green; }</style> </head> <body> <button id="go"> » Run </button> <div id="block"> Hello! </div> <script>/* Using multiple unit types within one animation. */ $("#go").click( function() { $("#block").animate({ width: "300px", opacity: 0.4, marginLeft: "50px", fontSize: "30px", borderWidth: "10px" }, 3000); });</script> </body></html> |
