jQuery 기본 애니메이션 기능

1. 기본 애니메이션 기능 사용

기본 애니메이션 기능은 크게 표시, 숨기기, 전환 세 가지로 구분됩니다. 모두 매개변수가 없는 버전을 제공하므로 애니메이션 전환이 화면의 표시 상태에 적용되지 않습니다. 요소:

$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();

제공 2개의 매개변수로 오버로딩. 콜백 함수를 생략할 수 있으므로 시작 예제에서 사용된 유일한 매개변수로 값을 전달할 수 있으며 요소는 애니메이션 효과와 함께 표시/숨겨집니다. 매개변수로 지정된 시간:

$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");

200이 지나면 레이어가 200밀리초 이내에 그라데이션으로 표시된다는 의미입니다. 속도 매개변수는 미리 정해진 세 가지 속도("slow", "normal") 중 하나의 문자열을 사용할 수 있습니다. ", 또는 "fast") 또는 애니메이션을 나타냅니다. 기간의 밀리초 값(예: 1000)입니다.

세 가지 함수 모두 콜백 함수 콜백에 전달될 수 있으며 서명은 다음과 같습니다.

function callback() {  this; // dom element}

이 내용은 콜백 함수는 이 함수를 실행하는 DOM 객체입니다. 애니메이션이 끝나면 실행됩니다.

2. 토글 기능 사용

토글 기능은 요소의 표시 상태를 전환할 수 있는 더 강력한 기능입니다. 예를 들어 텍스트를 사용해야 하는 상황이 자주 발생합니다. 레이어를 처음 클릭하면 팝업이 표시되며 두 번째 클릭하면 팝업 레이어가 숨겨집니다.

참고: 토글() 메서드는 jQuery 1.8에서 더 이상 사용되지 않는 것으로 선언되었으며 jQuery 1.9에서도 제거되었습니다. 토글이라는 메소드가 있습니다. 어느 것이 호출되는지는 전달된 인수의 설정에 따라 다릅니다.

이 효과를 얻기 위해 시작 예를 약간 수정하겠습니다.

<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>jQuery - Start Animation</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {      //动画速度
     var speed = 500;      //绑定事件处理
     $("#btnShow").click(function(event) {        //取消事件冒泡
       event.stopPropagation();        //设置弹出层位置
       var offset = $(event.target).offset();
       $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });        //切换弹出层的显示状态
       $("#divPop").toggle(speed);
     });      //单击空白区域隐藏弹出层
     $(document).click(function(event) {
       $("#divPop").hide(speed)
     });      //单击弹出层则自身隐藏
     $("#divPop").click(function(event) {
       $("#divPop").hide(speed)
     });
   });  </script></head><body>
 <div>
   <button id="btnShow">Display the text prompt</button>
 </div>
 <!-- 弹出层 -->
 <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
   <div style="text-align: center;">pop div</div>
 </div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>php中文网 - 领先的 php教程网站</p> <p>在 php中文网，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>

제출하다 코드 재설정

자동운전