溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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()如何使用的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
