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

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

不言

풀어 주다： 2019-01-18 10:45:20

앞으로

2391명이 탐색했습니다.

이 문서의 내용은 JQuery 애니메이션(코드 예제)에서 hide() 및 show() 사용에 대한 것입니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다. .

hide() 및 show() 메서드는 애니메이션 효과를 설정할 수 있습니다. 이 문서에서는 이 두 가지 메서드의 효과를 설명합니다.

hide(매개변수 1, 매개변수 2):

매개변수 1: 개체가 숨겨지는 데 걸리는 시간(밀리초)

매개변수 2: 개체가 숨겨진 후 트리거되는 콜백 함수.

show(매개변수 1, 매개변수 2):

매개변수 1: 위와 동일

매개변수 2: 위와 동일

예:

요구 사항 설명: 사진을 클릭하면 사진이 천천히 숨겨집니다. , 페이지에서 삭제된 후 후자의 사진이 이전 사진의 위치를 보완합니다

코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 100px;
            height: 80px;
        }
        
        #pics div{
            float: left;
            margin: 2px;
            width: 100px;
            height: 80px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            //获取所有的图片,并注册点击事件
            $("#pics>div").click(function(){
                $(this).hide(800,function(){
//回调函数，清除当前点击的元素
                    $(this).remove();//方法移除当前调用这个方法的元素---自杀
                });
            });
        });
    </script>
</head>
<body>
    <div id="pics">
        <div><img src="images/01.jpg" ></div>
        <div><img src="images/02.jpg" ></div>
        <div><img src="images/03.jpg" ></div>
        <div><img src="images/04.jpg" ></div>
        <div><img src="images/05.jpg" ></div>
    </div>
</body>
</html>

로그인 후 복사

비고:

 $(this).remove();//方法移除当前调用这个方法的元素---自杀

로그인 후 복사

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