- 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다.
- jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.
1. 예1
코드
|
<!DOCTYPE html> <html> <head> <style> span { color:red; cursor:pointer; } div { margin:3px; width:80px; height:80px; } div { background:#f00; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </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. 예2
코드
- animate() 매개변수
결과
(버튼 누르는 순간, Hello!가 점점 점점 점점점 커짐)
'■ jQuery(ajax) > Study' 카테고리의 다른 글
| [jQuery] jQuery 정리 잘된 곳 (0) | 2020.07.24 |
|---|---|
| [jQuery] jQuery - ajax (비동기 처리), (부분만 업데이트) ★ (0) | 2020.05.03 |
| [jQuery] jQuery - 탐색 (0) | 2020.05.03 |
| [jQuery] jQuery - from (0) | 2020.05.03 |
| [jQuery] jQuery - 4.속성제어 (0) | 2020.05.03 |