サマリー：動畫函數(shù)：注意頭峰寫法//顯示/隱藏 hide([speed/ms][callback]) //基本格式，speed以ms為單位 show() //滑動 slideUp() //滑動收起 slideDown() //滑動放下 slideToggle() //滑動切換 //淡出/淡入 fadeOut() fadeIn() fadeToggle() fadeTo
動畫函數(shù)：注意頭峰寫法
//顯示/隱藏
hide([speed/ms][callback]) //基本格式，speed以ms為單位
show()
//滑動
slideUp() //滑動收起
slideDown() //滑動放下
slideToggle() //滑動切換
//淡出/淡入
fadeOut()
fadeIn()
fadeToggle()
fadeTo(2000,0.3) //必須包含時長和透明度（0~1）兩個參數(shù)，順序
//自定義
animate({width:'500px', height:'400px'}) //可設(shè)置大量CSS樣式callback使用方法
callback部分為函數(shù)，需要將內(nèi)容放在function(){}內(nèi)，并作為上級函數(shù)的一個參數(shù)，以逗號分隔。
//隱藏并用alert提示
$('#btn1').click(function(){
$('p').hide(1500,function(){alert("元素已隱藏！")})
})animate()的用法
$('#btn10').click(function(){
$('#anm').animate({ //多個屬性用花括號包裹
width:'500px', height:'400px', //每個屬性用逗號分隔
left:'200px', top:'300px', //定位的前提是已使用absolute方式
opacity:0.4, //純數(shù)值可以不用引號
fontSize:'40px',
textIndent:'2em'
},1500) //動畫完成時長
})完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery動畫</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$('p').hide(1500)
})
$('#btn2').click(function(){
$('p').show(1000)
})
$('#btn3').click(function(){
$('p').slideUp()
})
$('#btn4').click(function(){
$('p').slideDown() //注意頭峰寫法
})
$('#btn5').click(function(){
$('p').slideToggle()
})
$('#btn6').click(function(){
$('div').fadeOut(2000)
})
$('#btn7').click(function(){
$('div').fadeIn(2000)
})
//可以繼續(xù)用fadeToggle或者fadeOut徹底淡出
$('#btn8').click(function(){
$('div').fadeToggle(1000)
})
$('#btn9').click(function(){
$('div').fadeTo(2000,0.3)
})
$('#btn10').click(function(){
$('#anm').animate({
width:'500px', height:'400px',
left:'200px', top:'300px',
opacity:0.4,
fontSize:'40px',
},1500)
})
})
</script>
</head>
<body>
<button type="button" id="btn1">點擊隱藏</button>
<button type="button" id="btn2">點擊顯示</button>
<p>山重水復(fù)疑無路，</p>
<p>柳暗花明又一村。</p>
<button type="button" id="btn3">slideUp</button>
<button type="button" id="btn4">slideDown</button>
<button type="button" id="btn5">slideToggle</button>
<div id="div1" style="height: 60px; width: 300px; background-color: #149BDF;">
</div>
<button type="button" id="btn6">fadeOut</button>
<button type="button" id="btn7">fadeIn</button>
<button type="button" id="btn8">fadeToggle</button>
<button type="button" id="btn9">fadeTo</button>
<button type="button" id="btn10">animate</button>
<div id="anm" style="height: 60px; width: 300px; background-color: darkseagreen; position: absolute;">
<p>文字放大</p>
</div>
</body>
</html>END