'셀렉터'에 해당되는 글 1건

  1. 2009.09.08 jQuery의 foreach를 활용한 CSS 애니메이션 예제
2009. 9. 8. 10:50

jQuery의 foreach를 활용한 CSS 애니메이션 예제

브라우저를 실행하면 li태그안에 있는 텍스트들이 점점 커져서 30px 사이즈가 됩니다.
테스트환경 : 익스플로러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>

Trackback 0 Comment 0