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

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

不言

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

앞으로

2330명이 탐색했습니다.

이 문서의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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