브라우저를 실행하면 li태그안에 있는 텍스트들이 점점 커져서 30px 사이즈가 됩니다.
테스트환경 : 익스플로러8, 크롬, 파이어폭스
테스트환경 : 익스플로러8, 크롬, 파이어폭스
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>TSET</title> <script type="text/javascript" src="inc/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // "aa"라는 아이디를 가진 element의 ul element의 하위에 있는 li element값들을 차례로 가져옴. $('#aa ul li').each(function() { //1.5초마다 30px까지 점차 커질수있도록 animate효과 적용. fontSize에서 "S"가 대문자인것에 주의. $(this).animate({fontSize:"30px"}, 1500); }); }); </script> </head> <body> <div id="aa"> <ul> <li id="li1">1</li> <li id="li2">2</li> <li id="li3">3</li> <li id="li4">4</li> <li id="li5">5</li> <li id="li6">6</li> <li id="li7">7</li> </ul> </div> </body> </html> |
'Programming > Javascript / Ajax' 카테고리의 다른 글
| Javascript기반의 Pagination (0) | 2009.08.31 |
|---|---|
| 자바스크립트 setTimeout메소드 (0) | 2009.08.31 |
| 자바스크립트 예제 소스 모음 (0) | 2009.08.31 |
| 날짜관련 자바스크립트 라이브러리 (0) | 2009.08.31 |
| Javascript Email Check (0) | 2009.08.31 |