摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画案例</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.mian{
float: left;width: 200px;height: 240px;margin: 20px;
}
.box1, .box2 ,.box3,.box4,.box8,.box10,.box13{
width: 200px;height: 200px;background: pink;
}
.box11{
background: #ccc;width: 200px;height: 200px;position: absolute;
}
button{
width: 200px;height: 40px;border: none;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$('.box1').hide()
$('.bt1').click(function(){
$('.box1').fadeIn(3000)
})
$('.bt2').click(function(){
$('.box2').fadeOut(3000)
})
$('.bt3').click(function(){
$('.box3').fadeToggle()
})
$('.bt4').click(function(){
$('.box4').fadeTo(1000,0.3)
})
$('.btn5').click(function(){
$('.p5').slideUp()
})
$('.p6').hide()
$('.btn6').click(function(){
$('.p6').slideDown()
})
$('.btn7').click(function(){
$('.p7').slideToggle()
})
$('.btn8').click(function(){
$('.box8').show()
})
$('.btn9').click(function(){
$('.box8').hide()
})
$('.btn10').click(function(){
$('.box8').toggle()
})
$('.right').click(function(){
$('.box11').animate({left:'+500px'},3000)
})
$('.stop').click(function(){
$('.box11').stop()
})
$('.btn12').click(function(){
$('.box13').animate({
height:'400px',
width:'400px',
opacity:'0.3',
},1500)
})
})
</script>
<h2>淡入淡出</h2>
<div class="mian">
<button class="bt1">淡出</button>
<div class="box1"></div>
</div>
<div class="mian">
<button class="bt2">淡入</button>
<div class="box2"></div>
</div>
<div class="mian">
<button class="bt3">切换</button>
<div class="box3"></div>
</div>
<div class="mian">
<button class="bt4">特定值</button>
<div class="box4"></div>
</div>
<br>
<h2>滑动</h2>
<div class="clear"></div>
<button class="btn5">上滑</button>
<p class="p5">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<p class="p5">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<p class="p5">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<br>
<button class="btn6">下滑</button>
<p class="p6">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<p class="p6">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<p class="p6">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<br>
<br>
<button class="btn7">切换</button>
<p class="p7">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<p class="p7">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<p class="p7">jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素</p>
<br>
<h2>显示与隐藏</h2>
<button class="btn8">显示</button>
<button class="btn9">隐藏</button>
<button class="btn10">切换</button>
<div class="box8"></div>
<br>
<h2>自定义动画</h2>
<button class="right">右移</button>
<button class="stop">停止</button>
<br>
<div class="box11">动画函数</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>字体放大</h2>
<button class="btn12">放大</button><br>
<div class="box13"></div>
</body>
</body>
</html>
批改老师：天蓬老师批改时间：2019-08-27 09:15:32
老师总结：jQuery中的自定义动画操作, 非常的简单, 也有意思, 运用巧妙可以做出许多酷炫的效果
