ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] 8. 애니메이션(Animation) - jQuery 강좌 jQuery / CSE
      Web/jQuery 2015. 6. 13. 11:17
      jQuery Effects - Animation

       jQuery animate() 메소드는 자신만의 애니메이션을 만들 수 있게 해줍니다.





      1. jQuery Animations - The animate() Method

       문법:

      $(selector).animate({params},speed,callback);


       요구되는 params 매개변수는 애니메이션을 적용할 CSS 속성입니다.


       예제:

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
       
      <!DOCTYPE html>
      <html>
          <head>
      <script> 
      $(document).ready(function(){
      $("button").click(function(){
      $("div").animate({left: '250px'});
      });
      });
      </script> 
          </head>
          <body>
       
          <button>Start Animation</button>
       
          <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
       
          <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
       
          </body>
      </html>
       
      		cs



       










      2. jQuery animate() - Manipulate Multiple Properties

       여러 속성을 한 번에 움직입니다:


       

      1
      2
      3
      4
      5
      6
      7
      8
      9
       
      $("button").click(function(){
          $("div").animate({
              left: '250px',
              opacity: '0.5',
              height: '150px',
              width: '150px'
          });
      }); 
      		cs






      3. jQuery animate() - Using Relative Values

       상대 값을 선언하여 움직일 수 있습니다. 


       

      1
      2
      3
      4
      5
      6
      7
      $("button").click(function(){
          $("div").animate({
              left: '250px',
              height: '+=150px',
              width: '+=150px'
          });
      }); 
      		cs








      4. jQuery animate() - Using Pre-defined Values

       

      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
      <!DOCTYPE html>
      <html>
          <head>
      <script> 
      $(document).ready(function(){
      $("button").click(function(){
      $("div").animate({
      height: 'toggle'
      });
      });
      });
      </script> 
          </head>
          <body>
       
          <button>Start Animation</button>
       
          <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
       
          <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
       
          </body>
      </html>
       
      		cs

       





       






      5. jQuery animate() - Uses Queue Functionality

       기본적으로 jQuery는 애니메이션을 위한 큐 기능성으로부터 옵니다.


       이 의미는 각각 animate()를 여러번 작성하였다면, jQuery는 이러한 메소드 호출에 관한 "내부" 큐를 만듭니다.

       그 다음, 하나 하나 animate를 호출하여 실행하게 됩니다.


       

      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
       
      <!DOCTYPE html>
      <html>
          <head>
      <script> 
      $(document).ready(function(){
      $("button").click(function(){
      var div=$("div");
      div.animate({height: '300px', opacity: '0.4'}, "slow");
      div.animate({width: '300px', opacity: '0.8'}, "slow");
      div.animate({height: '100px', opacity: '0.4'}, "slow");
      div.animate({width: '100px', opacity: '0.8'}, "slow");
      });
      });
      </script> 
          </head>
          <body>
       
          <button>Start Animation</button>
       
          <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
       
          <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
       
          </body>
      </html>
       
      		cs




       



      저작자표시

      'Web > jQuery' 카테고리의 다른 글

      [jQuery] 11. Chaining - jQuery 강좌 jQuery / CSE  (0) 2015.06.13
      [jQuery] 10. Call back - jQuery 강좌 jQuery / CSE  (0) 2015.06.13
      [jQuery] 9. Stop Animation - jQuery 강좌 jQuery / CSE  (0) 2015.06.13
      [jQuery] 7. Sliding - jQuery 강좌  (0) 2015.06.13
      [jQuery] 6. Fading - jQuery 강좌 jQuery / CSE  (0) 2015.06.13
      [jQuery] 5. 보이기 / 숨기기(Hide / Show) - jQuery 강좌 jQuery / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바