jQuery 의 animate 애니메이션 방법 및 애니메이션 줄 서기 문제 해결

animate()애니메이션 방법
  • 역할:css 속성 집합 을 실행 하 는 사용자 정의 애니메이션
  • 문법:$(selector).animate(스타일,속도,쉬 운,콜백)
  • •매개 변수 1:css 의 속성 이름과 운동 종료 위치의 속성 값 의 집합.
    •매개 변수 2:선택 할 수 있 습 니 다.애니메이션 의 속 도 를 규정 합 니 다.기본 값 은"normal"입 니 다.기타 값,"slow","normal","fast",디지털 형식,단 위 는 밀리초 입 니 다.
    •매개 변수 3:선택 할 수 있 습 니 다.서로 다른 애니메이션 점 에서 애니메이션 속 도 를 설정 하 는 easing 함수 입 니 다.값 은 swing(변속)과 linear(등 속)를 포함 합 니 다.
    •매개 변수 4:선택 할 수 있 습 니 다.animate 함수 가 실 행 된 후 실행 할 반전 함수 입 니 다.
    •주의:
    ① 모든 수치 가 있 는 속성 치 는 운동 할 수 있다.
    ② 다른 운동 방법,예 를 들 어 slideUp()등 도 매개 변수 3 과 매개 변수 4 가 있다.
    
     <style>
           *{
                    margin: 0;
                    padding: 0;
                }
                p{
                    position: relative;
                    left: 0;
                    margin-bottom: 10px;
                    background-color: skyblue;
                    width: 50px;
                    height: 50px;
                }
            </style>
        <!--------------------------------------->
        <body>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
         <script src="../jq/jquery-1.12.4.min.js"></script>
         <script>
                var $ps = $("p");
                //     ,                  
                var during = 1000;
                //              
                $ps.click(function(){
                    $(this).animate({"width":500,"opacity":0.5},during,"swing")
                })
            </script>
        </body>
    애니메이션 정렬
  • 같은 요소 대상 에 게 여러 개의 애니메이션 이 정의 되면 애니메이션 은 줄 을 서서 실 행 될 것 입 니 다.
  • 서로 다른 요소 대상 에 애니메이션 이 있 으 면 줄 서기 체제 가 나타 나 지 않 습 니 다.
  • 다른 비 운동 코드 라면 운동 이 끝 날 때 까지 기다 리 지 않 는 다.예 를 들 어 css 스타일 을 바 꾸 면 줄 을 서지 않 습 니 다.
  • 
    <style>
      div{
           width: 100px;
           height: 100px;
           border: 8px solid #ccc;
           position: absolute;
           left: 0;
           top: 0;
           background: url(../../imgs/1.jpg) no-repeat center center;
         }
    .box2{
          border-radius: 50%;
          overflow: hidden;
           }
    div span{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(221, 130, 130, 0.4);
         }
    </style>
      <!-------------css  ------------------->
    <body>
      <div class="box1"><span></span></div>
      <div class="box2"><span></span></div>
      
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
     var $box1 = $(".box1");
     var $box2 = $(".box2");
     var during = 2000;
     //      
     $box2.animate({"left": 400,"top":400},during)
     //box1、box2          
     //            
     $box1.animate({"left": 400},during)//  
     $box1.animate({"top": 400}, during)
     //             ,    
     //       ,          ,    
     //$box1.css("height",200)
     </script>
    </body>
  • 자체 애니메이션 의 숨겨 진 방법 을 보 여 줍 니 다.같은 요소 에 설정 하면 애니메이션 줄 서기
  • 도 있 습 니 다.
    
    //       ,          ,      
      $box2.mouseenter(function(){
          $(this).children().slideUp(during)
      })
      $box2.mouseleave(function(){
          $(this).children().slideDown(during)
      })
      //         ,  box2   span        ,         
  • 같은 요소 의 운동 은 체인 호출 방법
  • 으로 간소화 할 수 있다.
    
    //           ,            
    //                  
    $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
    delay()지연 방법
  • delay()를 특정한 운동 방법 에 설치 하기 전에 뒤의 운동 은 규정된 시간 후에 실행 해 야 하 며 운동 을 지연 시 키 는 효과 가 있다 고 밝 혔 다
  • .
  • delay()의 매개 변 수 는 시간의 수치 이 고 다른 운동 방법 도 지연 효과 가 있다
  • 
       //  
    $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
    stop()애니메이션 정지 방법
  • 요소 대상 의 줄 을 서 있 는 애니메이션 을 어떤 방식 으로 멈 추 는 지 설정 합 니 다
  • stop()은 두 개의 매개 변수 가 있 고 네 가지 정지 방식 을 얻 을 수 있 으 며 매개 변 수 는 모두 불 값
  • 이다.
    •매개 변수 1:뒤에 있 는 애니메이션 줄 을 비 울 지 여 부 를 설정 합 니 다.true 가 비 울 지 여 부 를 표시 하면(뒤에 있 는 애니메이션 도 같이 제거 되 고 실행 하지 않 습 니 다)false 가 비 울 지 않 으 면 현재 애니메이션 만 중단 합 니 다(뒤의 애니메이션 은 즉시 실행 합 니 다).
    •매개 변수 2:현재 애니메이션 이 즉시 완 료 될 지 여 부 를 설정 합 니 다.true 가 즉시 완 료 를 표시 하면 대상 은 바로 끝 위치 로 갑 니 다.false 가 현재 애니메이션 을 완성 하지 않 으 면 현재 위치 에서 중단 합 니 다.
    
    <style>
     div {
          width: 100px;
          height: 100px;
          border: 8px solid #ccc;
          position: absolute;
          left: 0;
          top: 40;
          background: url(../../imgs/1.jpg) no-repeat center center;
       }  
     div span {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(221, 130, 130, 0.4);
        }
     </style>
    </head>
      
    <body>
     <input type="button" value="true true" id="btn1">
     <input type="button" value="true false" id="btn2">
     <input type="button" value="false false" id="btn3">
     <input type="button" value="false true" id="btn4"><br>
      
     <div class="box1"><span></span></div>
      
      
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
       var $box1 = $(".box1");
      
       var during = 2000;
      
       //            
       $box1.animate({ "left": 400 }, during)
       $box1.animate({ "top": 400 }, during)
       $box1.animate({"left":0},during)
       $box1.animate({"top":40},during)
     
      //     
      //        
      var $btn1 = $("#btn1")
      var $btn2 = $("#btn2")
      var $btn3 = $("#btn3")
      var $btn4 = $("#btn4")
      
      //true true                       ,      
      $btn1.click(function () {
           $box1.stop(true, true);
      })
      //true false            
      $btn2.click(function () {
         $box1.stop(true, false);
      })
      //false false         ,    
      //         
      $btn3.click(function () {
         $box1.stop(false, false);
      })
      //false true         ,         
      $btn4.click(function () {
           $box1.stop(false, true);
      })
     </script>
    </body>
  • 기본 적 인 상황 에서 매개 변수 값 은 false
  • 입 니 다.
  • 실제 작업 에서 보통 뒤의 줄 을 비우 고 현재 위 치 를 정지 하 며 stop(true)을 많이 사용 합 니 다.두 번 째 매개 변 수 는 기본 값 을 false 로 설정 하지 않 습 니 다.
  • 애니메이션 줄 비우 기
    질문
  • 운동 을 시작 하 는 프로그램 을 하나의 이벤트 함수 에 놓 으 면 이벤트 가 여러 번 촉발 되 고 여러 번 함수 가 실 행 됩 니 다.한 요소 에 여러 개의 애니메이션 을 추가 하여 애니메이션 줄 을 서 게 됩 니 다.(애니메이션 축적 문제)
  • 줄 을 서 있 는 애니메이션 을 제거 하고 스 팸 방지 작업 을 해 야 합 니 다.
  • 해결 방법
  • 방법 1:stop()방법 이용
    모든 운동 함수 전에 stop(true)을 추가 합 니 다.운동 이 실행 되 기 전에 앞 에 줄 을 서 있 는 애니메이션 을 비 운 다음 현재 위치 에서 멈 추 는 것 을 의미 합 니 다.
    
    <style>
     div {
         width: 100px;
         height: 100px;
         border: 8px solid #ccc;
         position: absolute;
         left: 0;
         top: 0;
         background: url(../../imgs/1.jpg) no-repeat center center;
       } 
    div span {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(221, 130, 130, 0.4);
      }
      </style>
    <body>
      <input type="button" value="true true" id="btn1">
      <input type="button" value="true false" id="btn2">
      <input type="button" value="false false" id="btn3">
      <input type="button" value="false true" id="btn4"><br>
    
      <div class="box1"><span></span></div>
    
      <script src="../jq/jquery-1.12.4.min.js"></script>
      <script>
         var $box1 = $(".box1");
    
         var during = 2000;
        //    
        $box1.mouseenter(function(){
            $(this).children().stop(true).slideUp(during)
        })
    
       $box1.mouseleave(function(){
           $(this).children().stop(true).slideDown(during)
       })
        </script>
    </body>
    방법 2:함수 절 류 를 이용 한 방법
    요소 가 움 직 이 고 있다 면,바로 return 입 니 다.뒤의 운동 코드 를 실행 하지 마 십시오.
    모든 jQuery 대상 은 is()방법 을 호출 할 수 있 습 니 다.역할 은 요소 대상 의 특정한 상 태 를 표시 하 는 것 입 니 다.
    매개 변수 위치 가 is(":animated")라면 animated 는 운동 을 하고 있다 는 뜻 이 고,반환 값 은 불 값 이 며,true 는 운동 을 하고 있다 는 뜻 이 며,false 는 운동 이 없다 는 뜻 이다.
    
    //      
    $box1.mouseenter(function(){
        if(is(":animated")){
            //           ,  return  ,        
            return;
        }
        //      ,           
        $(this).children().slideup(during);
    
    })
    
    $box1.mouseenter(function(){
        if(is(":animated")){
            //           ,  return  ,        
            return;
        }
        //      ,           
        //         ,  stop(true)    
        $(this).children().stop(true).slideup(during);
    
    })
  • 가끔 은 안전 을 위해 함수 절 류 를 사용 할 때 stop(true)과 결합 하여 사용 합 니 다
  • .
  • stop(true)과 함수 절 류 방법 은 애니메이션 축적 문 제 를 해결 하 는 두 가지 방법 이 차이 가 있다.stop 방법 은 멈 출 때 현재 위치 에 멈 출 수 있 고 함수 절 류 는 멈 출 때 return 이 돌아 오 면 현재 있 는 애니메이션 이 실 행 됩 니 다.
  • 이상 은 jQuery 의 animate 애니메이션 방법 과 애니메이션 줄 서기 문제 해결 에 대한 상세 한 내용 입 니 다.jQuery animate 애니메이션 방법 에 대한 자 료 는 저희 의 다른 관련 글 을 주목 하 십시오!

    좋은 웹페이지 즐겨찾기