jineecode

animate 본문

JS/jquery

animate

지니코딩 2020. 12. 14. 13:56

1. animate event

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animate</title>
    <!-- jquery framework cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="animate.js"></script>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <p>디비전 안에 문단</p>
    </div>

  </body>
</html>

 

animate 문법

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

 

mouseenter 와  mouseleave를 쓴 animate 메서드

$(function(){  
  $('div').on("mouseenter",function(){
    $('div').animate({"width": 300, "height":300},
    500);
  });
  
  $('div').on("mouseleave",function(){
    $('div').stop().animate({"width": 100, "height":100},
    500);
  });
 });

 

*animate에 stop()을 넣어주지 않으면 마우스오버한 횟수를 모두 채웁니다.

 

  $('div').on("mouseenter",function(){
    $('div').stop().animate({"width": 300, "height":300}
    ,500);
  });

 

콜백이 들어간 animate 메서드

 

$(function(){

  $('div').on("mouseenter",function(){
    $('div').stop().animate({"width": 300, "height":300},
    500, 
    function(){
      $("div>p").animate({"font-size":"30px"}, 
      500);
    });
  });


  $('div').on("mouseleave",function(){
    $('div').stop().animate({"width": 100, "height":100},
    500,  
    function(){
      $("div>p").animate({"font-size":"16px"}, 
      500);
    });
  });

 

 

'JS > jquery' 카테고리의 다른 글

jquery 한번에 다수의 css 속성 변경하기  (0) 2021.07.08
filereader event  (0) 2021.01.04
event  (0) 2020.12.14
attr method  (0) 2020.12.14
스크롤시 해당 섹션의 메뉴를 활성화 시키기(jquery편)  (0) 2020.12.11
'JS/jquery' Related Articles more
Comments