abstract：<!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的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</p>
<p class="p5">jQuery的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</p>
<p class="p5">jQuery的滑動是通過高度的變化（向某個方向增大或者縮小）來動態(tài)的顯示所匹配的元素</p>
<br>
<button class="btn6">下滑</button>
<p class="p6">jQuery的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</p>
<p class="p6">jQuery的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</p>
<p class="p6">jQuery的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</p>
<br>
<br>
<button class="btn7">切換</button>
<p class="p7">jQuery的滑動是通過高度的變化（向某個方向增大或者縮小）來動態(tài)的顯示所匹配的元素</p>
<p class="p7">jQuery的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</p>
<p class="p7">jQuery的滑動是通過高度的變化（向某個方向增大或者縮?。﹣韯討B(tài)的顯示所匹配的元素</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">動畫函數(shù)</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>
Correcting teacher：天蓬老師Correction time：2019-08-27 09:15:32
Teacher's summary：jQuery中的自定義動畫操作, 非常的簡單, 也有意思, 運用巧妙可以做出許多酷炫的效果