<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>39- jQuery 隱藏和顯示動畫</title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
margin-top: 20px;
display: none;
}
</style>
<script src=”../static/js/jquery-3.6.0.js”></script>
<script>
$(function(){
$(“button”).eq(0).click(function(){ // 點擊第一個按鈕後調用函數
// $(“div”).css(“display”, “block”) // 找到div把他的css樣式里的”display”設置成”block”， 也就是顯示的意思
$(“div”).show(1000, function(){ // 找到div用1000毫秒也就是1秒鐘顯示出來，而後執行函數
// 動畫執行完畢調用
alert(‘顯示動畫完畢’) // 彈出窗口
})
})
$(“button”).eq(1).click(function(){ // 點擊第二個按鈕後調用函數
// $(“div”).css(“display”, “none”) // 找到div把他的css樣式里的”display”設置成none， 也就是隱藏的意思
$(“div”).hide(2000, function(){ // 找到div用2000毫秒也就是2秒鐘隱藏起來，而後執行函數
alert(‘隱藏動畫完畢’) // 彈出窗口
})
})
$(“button”).eq(2).click(function(){ // 點擊第三個按鈕後調用函數
$(“div”).toggle(3000, function(){ // 找到div用3000毫秒也就是3秒鐘切換隱藏/顯示狀態，而後執行函數
alert(‘切換動畫完畢’) // 彈出窗口
})
})
})
</script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div>
</div>
</body>
</html>
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/259144.html
微信掃一掃 
支付寶掃一掃 