JQuery 애니메이션 hide() 및 show() 사용법 설명 1(코드 예)
- 不言앞으로
- 2019-01-18 10:45:202382검색
이 문서의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제