abstrak：動畫效果：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery的動畫效果</title> <script type="text/javascript" sr
動畫效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的動畫效果</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.aa{width:100px;height:100px;border:1px solid #ccc;background:green;display:none;}
hr{width:60%;color:black;float:left;}
#dd,#ee,#gg{font-size:25px;font-weight:bold;color:red;}
#dd{display:none;}
.hh,.ii,.jj,.kk{width:100px;height:130px;float:left;margin-right:80px;}
.a1,.a2,.a3,.a4,.a7,.a8{width:100px;height:100px;border:1px dotted #ccc;background:blue;padding:5px auto;border-radius:13px;}
.a7{position:absolute;margin-top:8px;}
#a1,#a2,#a3,#a4{margin:5px auto;}
.cle{clear:both;}
.a0{width:500px;height:180px;}
.a81{width:210px;height:150px;}
#a9,#a10{margin-left:10px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#bb').click(function(){
$('.aa').show(1500)//點擊按鈕顯示div，速度1500毫秒
})
$('.cc').click(function(){
$('#dd').slideDown(1500)
})
$('.dd').click(function(){
$('#ee').slideUp(1500)
})
$('.ff').click(function(){
$('#gg').slideToggle(800)
})
$('.a1').hide()
$('#a1').click(function(){
$('.a1').fadeIn(1800)
})
$('#a2').click(function(){
$('.a2').fadeOut(1800)
})
$('#a3').click(function(){
$('.a3').fadeToggle(1800)
})
$('#a4').click(function(){
$('.a4').fadeTo(1800,0.4)
})
$('#a5').click(function(){
$('#a6').animate({fontSize:'20px'},1500)
})
$('#a7').click(function(){
$('.a7').animate({left:'200px',opacity:'0.5',width:'200px'},1500)
})
$('#a8').click(function(){
$('.a8').animate({
width:'toggle',height:'toggle'
},1500)
})
$('#a9').click(function(){
$('.a7').stop()
})
$('#a10').click(function(){
$('.a8').stop(true,true)
})
})
</script>
<h3>動畫效果</h3>
<div class="aa"></div>
<button id="bb">按鈕</button><br>
<hr><br>
<h3>滑動效果</h3>
<button class="cc">展開文字</button><br>
<span id="dd">這里是要顯示的文字</span><br>
<button class="dd">折疊文字</button><br>
<span id="ee">這里是要折疊起來的文字</span><br>
<hr><br>
<button class="ff">顯示/隱藏</button><br>
<span id="gg">點擊上面按鈕，顯示或隱藏這行文字</span><br>
<hr><br>
<h3>淡入淡出</h3>
<div class="hh">
<button id="a1">淡入</button><br>
<div class="a1"></div>
</div>
<div class="ii">
<button id="a2">淡出</button><br>
<div class="a2"></div>
</div>
<div class="jj">
<button id="a3">切換淡入淡出</button><br>
<div class="a3"></div>
</div>
<div class="kk">
<button id="a4">指定值</button><br>
<div class="a4"></div>
</div>
<div class="cle"></div>
<hr><br>
<h3>切換預(yù)定義的值</h3>
<div class="a0">
<button id="a5">字體變大</button><br>
<span id="a6">點擊按鈕這行字體變大</span><br>
<button id="a7">移動div并變淡變大</button><button id="a9">停止動畫</button><br>
<div class="a7"></div>
</div>
<br>
<div class="a81">
<button id="a8">切換</button><button id="a10">快速完成動畫</button><br>
<div class="a8"></div>
</div>
<br>
</body>
</html>導(dǎo)航條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery導(dǎo)航條</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#bebebe;font-size:18px;font-weight:bold;color:#fff;}
.top{width:1000px;height:35px;background:#5a5aad;margin:5px auto;border:1px solid #ccc;border-radius:7px;}
li{list-style:none;float:left;margin-left:90px;line-height:35px;}
a{text-decoration:none;color:#fff;}
span{display:none;}
#a2,#a3{width:90px;height:110px;padding:5px auto;}
#a4{width:90px;height:145px;padding:5px auto;}
#a21,#a22,#a31,#a32,#a41,#a42,#a43{width:90px;height:35px;background:#5a5aad;padding-left:10px;line-height:35px;float:left;position:relative;left:-10px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#a2').hover(
function(){
$('#a21,#a22').show()
},
function(){
$('#a21,#a22').hide()
}
)
$('#a3').hover(
function(){
$('#a31,#a32').show()
},
function(){
$('#a31,#a32').hide()
}
)
$('#a4').hover(
function(){
$('#a41,#a42,#a43').show()
},
function(){
$('#a41,#a42,#a43').hide()
}
)
})
</script>
<div class="top">
<ul>
<li id="a1"><a href="#">網(wǎng)站首頁</a></li>
<li id="a2">新聞動態(tài)
<span id="a21"><a href="#">昨日新聞</a></span><span id="a22"><a href="#">今日新聞</a></span>
</li>
<li id="a3">近期價格
<span id="a31"><a href="#">昨日價格</a></span><span id="a32"><a href="#">今日價格</a></span>
</li>
<li id="a4">公司地址
<span id="a41"><a href="#">華北地區(qū)</a></span><span id="a42"><a href="#">華南地區(qū)</a></span><span id="a43"><a href="#">海外地區(qū)</a></span>
</li>
<li id="a5"><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-01-17 18:32:52
Rumusan guru：jQuery將動畫制作的門檻降低了很多, 記得之前為了寫一個動畫效果, 要少一二百行代碼,用jQuery ,只要幾行, 真好