[J] JavaScript & jQuery 공부하기 #31

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

36. animation
  * animation 관련 메소드
    - 요소의 스타일을 변경해 마치 요소가 움직이는 것처럼 보이게 함

    - 요소의 크기나 배경색, 글자의 폰트 등 다양한 속성값을 변경 할 수 있음
    < script type="text/javascript">
      $("요소").animation({변경할 스타일});
    </ script>

  * animation() 이용해 글자 이동 및 커지는 효과

    - 이벤트를 발생시킬 버튼과 애니메이션이 적용될 문장을 생성하고
      문장의 position 속성의 기본값을 지정함
      < body>
        < button>animation</ button>
        < p style="position:absolute;">방가워!</ p>
      < /body>

    - 버튼을 클릭할 때마다 오른쪽으로 50px만큼 움직이고,
      글자가 2em만큼 커지는 코드블록을 작성함
      < script type="text/javascript">
        $(document).ready(function(){
          $("button").click(function(){
            $("p").animate({
              left:'+=50px', fontSize:'+=2em'
            });
          });
        });
      </ script>

   * 예제
   < script type="text/javascript">
     $(document).ready(function(){
      $("button").click(function(){
        var div = $("div");
        div.animate({left: '+=100px', fontSize: '2em'});
        div.animate({left: '-=100px', fontSize: '1em'});
      });
     });
   </ script>

   < body>
     < div style="background:yellow; height:100px; width:200px; position:absolute;">방가워</ div>
   </ body>