jQuery 애니메이션에 대한 사전 이해

jQuery Animation

텍스트나 버튼을 클릭하여 프롬프트 텍스트를 표시하는 등 웹 프로그램을 만들 때 팝업 레이어를 사용해야 하는 경우가 종종 있습니다. 다음과 같은 요구 사항이 있다고 가정합니다.

그림 "버튼에서 프롬프트 텍스트 표시"를 클릭하면 버튼 아래에 팝업 레이어가 표시됩니다. 빈 영역이나 팝업 레이어를 클릭하면 팝업 레이어가 사라집니다.

완료할 수도 있습니다. 이 작업은 원본 자바스크립트를 사용하여 수행됩니다. 주의할 점은 다음과 같습니다.

1. 팝업 이벤트를 실행하는 개체가 페이지의 어느 곳에나 나타날 수 있으므로 팝업 레이어의 위치를 동적으로 계산해야 합니다.

2. 클릭을 문서에 바인딩하는 것은 팝업 레이어를 닫는 기능입니다. 그렇지 않으면 다른 사람이 바인딩한 기능이 사라질 수 있습니다.

3. 문서에 닫기 기능을 바인딩한 후 표시 기능에서 이벤트 버블링을 취소해야 합니다. 그렇지 않으면 팝업 레이어가 표시된 후 즉시 닫힙니다. 이 예제를 쉽게 구현할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>jQuery - Start Animation</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(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").show(speed);
            });            //单击空白区域隐藏弹出层
            $(document).click(function(event) { $("#divPop").hide(speed) });            //单击弹出层则自身隐藏
            $("#divPop").click(function(event) { $("#divPop").hide(speed) });
        });    </script></head><body>
    <div>
        <br /><br /><br />
        <button id="btnShow">显示提示文字</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;">弹出层</div>
    </div>
    </body>
    </html>

기본 표시 및 숨기기 기능 외에도 이제 팝업 레이어 표시 및 숨기기는 그라데이션 애니메이션 효과입니다. 처음으로 jQuery의 애니메이션 기능이 너무 간단합니다! 프로젝트에서 사용했을 때 예상치 못한 놀라움을 느꼈습니다. 브라우저에서 위치를 계산하는 데 어려움을 겪었지만 jQuery의 offset() 함수와 height() 함수를 통해 팝업 레이어의 위치를 정확하게 계산할 수 있습니다. . 이러한 기능은 캡슐화되어 있습니다. 팝업 레이어 위치 속성을 설정할 때 "px"를 추가하는 데 주의해야 합니다. 그렇지 않으면 FireFox에서 문제가 쉽게 발생합니다.

jQuery의 애니메이션 기능은 주로 세 가지 범주로 나뉩니다.

기본 애니메이션 기능: 투명도 그라데이션과 슬라이딩 효과가 모두 있습니다. 가장 일반적으로 사용되는 애니메이션 효과 기능입니다. 슬라이딩 애니메이션 기능: 페이드인 및 페이드아웃 애니메이션 기능만 사용합니다. 투명도 그라데이션 효과만 사용합니다.

이 세 가지 유형의 애니메이션 기능 효과는 모두 다르지만 기본적으로 사용법은 동일합니다. 또한 위 세 가지 기능의 효과는 우리가 원하는 것이 아닐 수도 있습니다. , jQuery는 사용자 정의 애니메이션 기능을 제공하여 자신만의 애니메이션 효과를 정의합니다.

세 가지 유형의 내장 애니메이션 기능과 사용자 정의 애니메이션 기능이 아래에 별도로 설명되어 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery - Start Animation</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(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").show(speed); }); //单击空白区域隐藏弹出层 $(document).click(function(event) { $("#divPop").hide(speed) }); //单击弹出层则自身隐藏 $("#divPop").click(function(event) { $("#divPop").hide(speed) }); }); </script></head><body> <div> <br /><br /><br /> <button id="btnShow">显示提示文字</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;">弹出层</div> </div> </body> </html>

제출하다 코드 재설정

자동운전