摘要：<!DOCTYPE html> <html> <head> <title>jQuery动画</title> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.box1{width: 200px;height: 200px;background:pink;margin:10px 10px;}
.box2{width: 200px;height: 200px;background:red;margin:10px 10px;}
.box3{width:500px;height:20px;margin:5px 5px; background:#888;}
.ani{background:darkblue;height:20px;width:0px;border:1px solid yellow;}
</style>
<script type="text/javascript">
$(document).ready(function(){
// hide()/show() 隐藏显示的元素
$('#btn1').click(function(){
$('p').hide(1500);
})
$('#btn2').click(function(){
$('p').show(1000)
})
//slideToggle([speed] [fn])切换元素的可见性,是slideUp/slideDown的结合
$('#btn3').click(function(){
$('p').slideToggle(1000)
})
//fadeTo([speed] opacity [fn]) 参数必须有前两项;
$('.box1').hide();
$("#btn4").click(function(){
$('.box1').fadeTo(
'1000',
0.8,
);
});
//fadeToggle
$("#btn5").click(function(){
$('.box2').fadeToggle(1000);
});
//animate
$('#btn6').click(function(){
$('p').animate({fontSize:'40px'},1000)
})
$('#btn7').click(function(){
$('.ani').animate({
width:"45%"}
,1000)
})
})
</script>
</head>
<body>
<button id="btn1">点击隐藏</button>
<button id="btn2">点击显示</button>
<button id="btn3">滑动显示隐藏</button><hr>
<button id="btn4">fadeTo</button>
<button id="btn5">fadeToggle</button>
<button id="btn6">animate</button>
<button id="btn7">animate进度</button>
<!-- <div></div> -->
<p>这是一条信息</p>
<p>另外一条信息！</p>
<p>另外一条信息！！</p>
<div class="box1">这是一个方块</div>
<div class="box2">这是第二个方块</div>
<div class="box3"><div class="ani"></div></div>
</body>
</html>animate可实现进度条，slideTaggle\fadeToggle可以实现长页面点击隐藏。
