摘要：动画函数：注意头峰写法//显示/隐藏 hide([speed/ms][callback]) //基本格式，speed以ms为单位 show() //滑动 slideUp() //滑动收起 slideDown() //滑动放下 slideToggle() //滑动切换 //淡出/淡入 fadeOut() fadeIn() fadeToggle() fadeTo
动画函数：注意头峰写法
//显示/隐藏
hide([speed/ms][callback]) //基本格式，speed以ms为单位
show()
//滑动
slideUp() //滑动收起
slideDown() //滑动放下
slideToggle() //滑动切换
//淡出/淡入
fadeOut()
fadeIn()
fadeToggle()
fadeTo(2000,0.3) //必须包含时长和透明度（0~1）两个参数，顺序
//自定义
animate({width:'500px', height:'400px'}) //可设置大量CSS样式callback使用方法
callback部分为函数，需要将内容放在function(){}内，并作为上级函数的一个参数，以逗号分隔。
//隐藏并用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, //纯数值可以不用引号
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)
})
//可以继续用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>山重水复疑无路，</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
