摘要：动画效果：<!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>切换预定义的值</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>导航条
<!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">
*{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="#">网站首页</a></li>
<li id="a2">新闻动态
<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="#">华北地区</a></span><span id="a42"><a href="#">华南地区</a></span><span id="a43"><a href="#">海外地区</a></span>
</li>
<li id="a5"><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-17 18:32:52
老师总结：jQuery将动画制作的门槛降低了很多, 记得之前为了写一个动画效果, 要少一二百行代码,用jQuery ,只要几行, 真好
