JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)-JS 튜토리얼-php.cn

JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)

不言

풀어 주다： 2019-01-18 10:48:46

앞으로

2488명이 탐색했습니다.

이 글의 내용은 JQuery 애니메이션에서 hide()와 show() 사용에 대한 두 번째 설명입니다(코드 예제). 필요한 친구들이 참고하면 좋을 것 같습니다. 당신에게.

이 글은 콜백 함수 소개뿐만 아니라 재귀 관련 지식 포인트를 소개하는 hide()와 show()에 대한 추가 보충 글입니다.

케이스 요구 사항:

JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)

"애니메이션 표시" 버튼을 클릭하면 4개의 아바타가 앞에서 뒤로 각각 0.8초의 속도로 나타납니다

지식 포인트:

재귀적 사고: 인수.callee

콜백 함수: 이전 섹션에서 설명됨

구현 아이디어("애니메이션 숨기기"를 클릭하여 예):

①모든 img 가져오기, 마지막 img 선택

$("p>img").last("img")

②마지막 img 숨기기 및 콜백 기능 설정

$("p>img" ).last(" img").hide(800,function(){ }

③콜백 함수에서 현재 함수의 이전 img를 숨기고 재귀 매개변수를 설정합니다

$(this).prev().hide (800,arguments.callee);

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 90px;
            height: 90px;
            float: left;
            /* vertical-align: top; */
        }
        div{
            width: 400px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            $("#hide").click(function(){
                $("div>img").last("img").hide(800,function(){
                    //回调函数,  arguments.callee相当于递归
                    $(this).prev().hide(800,arguments.callee);
                })
            });
            
            $("#show").click(function(){
                $("div>img").first("img").show(800,function(){
                    //回调函数
                    $(this).next().show(800,arguments.callee);
                })
            });
        });
    </script>
</head>
<body>
    <input type="button" id="hide" value="隐藏动画" />
    <input type="button" id="show" value="显示动画" />
    <div >
        <img  src="images/1.jpg"  alt="JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)" >
        <img  src="images/2.jpg"  alt="JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)" >
        <img  src="images/3.jpg"  alt="JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)" >
        <img  src="images/4.jpg"  alt="JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)" >
    </div>
</body>
</html>

로그인 후 복사

위 내용은 JQuery 애니메이션 hide() 및 show() 사용법 설명 2(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!