jquery 애니메이션 효과 연구 노트(8개 효과)

1. 요소 표시 및 숨기기

표시:없음
표시:표시

간단한 표시 및 숨기기 방법

a) show() 쇼
b) 숨기기() 숨기기
c) 토글() 스위치, 숨기려면 표시, 표시하려면 숨기기

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //显示
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
</body>

로그인 후 복사

CSS는 요소 표시 및 숨기기의 두 가지 방법, 즉 가시성 또는 표시 스타일을 지원합니다. 요소 표시 및 숨기기를 제어할 때 동일한 효과가 있지만 결과는 다릅니다.
구체적인 지침은 다음과 같습니다.

요소를 숨길 때 가시성 속성은 문서 흐름에서 요소의 영향도 저장하며 숨긴 후에도 요소의 알 수 없는 내용은 변경되지 않습니다. 이 속성에는 표시(기본값)와 숨김이라는 두 가지 값이 포함됩니다.
표시가 숨겨진 후에는 숨겨진 요소가 더 이상 문서의 위치를 차지하지 않습니다.

2. 슬라이딩 효과 표시 및 숨기기

slideUp(speed[,callback])은 요소를 위로 밀고 결국 숨깁니다
slideDown(speed[,callback])은 요소를 아래로 슬라이드하고 마지막으로
slideToggle(속도[,콜백])

속도 : 효과의 속도를 설정합니다(느리게(600) 보통(400) 빠르게(200) 시간(밀리초))
콜백 : 이펙트 실행 후 자동으로 호출되는 콜백 함수

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //显示
    $("div").slideDown(3000,function(){
      alert('我又回来了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
 </body>

로그인 후 복사

3. 페이드 효과

특정 투명도 변경을 통해 요소를 표시하고 숨길 수 있습니다

fadeIn(속도, [콜백])
fadeOut(속도, [콜백])
fadeToggle(speed, [콜백]) 스위치 효과
fadeTo(speed, opacity, [callback])은 div를 특정 투명도(0-1)로 설정합니다. 0.3은 30% 투명도입니다

<script type="text/javascript"> 
  function f1(){
    //隐藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //显示
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value="隐藏" onclick="f1()" />
  <input type="button" value="显示" onclick="f2()" />
  <input type="button" value="开关效果" onclick="f3()" />
</body>

로그인 후 복사

투명도 설정, div의 투명도는 30%입니다:

4. 애니메이션 효과 animate()의 기본 메소드

show() hide() 및 기타 애니메이션 효과는 내부적으로 animate() 메서드를 실행합니다

$().animate(css效果参数[，时间][，回调函数]);

로그인 후 복사

css()와 같은 일반적인 jquery 메서드는 실행 후 현재 jquery 개체를 반환하므로 많은 jquery 메서드를 체인으로 호출할 수 있습니다.

 <script type="text/javascript">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value="设置" onclick="f1()" />
</body>

로그인 후 복사

5. 덧셈과 뺄셈 애니메이션

애니메이션이 왼쪽: 한 번에 500으로 설정된 경우 div를 처음 클릭하면 왼쪽으로 500픽셀 이동하고 두 번째 클릭은 이동하지 않습니다. 더하기, 더하기, 빼기는 연속적인 움직임입니다. 왼쪽: "500px"에서 왼쪽: " =500px" 또는 왼쪽: "-=500px"로 변경하세요.

(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

로그인 후 복사

6. 다양한 애니메이션

1. 동시에 여러 애니메이션 실행
위의 예에서는 left 속성의 변경만 제어합니다. 이번에는 left 속성을 제어할 때 요소의 높이도 200px로 제어합니다.

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

로그인 후 복사

2. 애니메이션을 순차적으로 실행

위 예시에서는 요소를 오른쪽으로 이동하고 높이를 확대하는 두 가지 애니메이션이 동시에 수행됩니다. 이제 먼저 오른쪽으로 이동한 다음 높이를 확대해야 합니다. 위의 animate() 메서드를 분할하여 두 개로 작성하면 됩니다.

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

로그인 후 복사

3. 종합 애니메이션

다음에는 더 복잡한 애니메이션이 완성됩니다. 높이를 높이고 불투명도를 50%에서 100%로 전환하면서 div 요소를 클릭하여 오른쪽으로 이동합니다. 그런 다음 너비가 커지면서 위에서 아래로 이동하게 합니다.
일부 효과 후에는 페이드 아웃되어 숨겨집니다.

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

로그인 후 복사

7. 애니메이션 콜백 기능

위의 예에서는 마지막 단계에서 요소를 숨기는 대신 CSS 스타일을 전환하려는 경우입니다. 이제 animate

의 세 번째 매개변수 콜백 함수를 사용할 수 있습니다.

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

로그인 후 복사

이렇게 하면 애니메이션 대기열에 CSS 메서드가 추가됩니다.

8. 애니메이션을 중지하고 애니메이션 상태인지 확인

1. 요소의 애니메이션을 중지합니다.

stop([clearQueue][,gotoEnd]) 둘 다 선택적 매개변수이며 둘 다 부울 유형입니다.
매개변수 설명:

clearQueue: 완료되지 않은 애니메이션 대기열을 지울지 여부를 나타냅니다
gotoEnd: 실행 중인 애니메이션의 종료 상태로 점프할지 여부를 나타냅니다.
포괄적인 예제를 통해 stop() 메소드의 두 매개변수를 이해할 수 있습니다.

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止当前动画，继续下一个动画 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有动画 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三国杀杀天下</h5> 
    <div class="content"> 
      夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情 
    </div> 
  </div> 
</body> 
</html>

로그인 후 복사

2. 요소가 애니메이션 상태인지 확인

animate() 메서드를 사용할 때 애니메이션 누적으로 인해 발생하는 애니메이션과 사용자 동작 간의 불일치를 피하세요. 애니메이션 누적은 사용자가 요소에 대해 animate() 애니메이션을 빠르게 수행할 때 발생합니다.

해결책은 요소가 애니메이션 상태인지 확인하고, 애니메이션 상태가 아닌 경우에만 요소에 새 애니메이션을 추가하는 것입니다.
사용법:

if(!$(element).is(":animated")){ 
  //添加新的动画 
}

로그인 후 복사

이 기사의 8가지 jquery 애니메이션 효과에 대한 자세한 분석을 통해 jquery 애니메이션 효과를 포괄적으로 소개하는 이 기사가 마음에 드셨으면 좋겠습니다.

jquery 애니메이션 효과 연구 노트(8개 효과)_jquery