滑动
说明：
不断改变元素的高度来实现的。
方法：
slideDown()：带动画的展开。
slideUp()：带动画的收缩。
slideToggle()：带动画的切换展开/收缩。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<button id="btn1">慢慢收缩</button>
<button id="btn2">慢慢展开</button>
<button id="btn3">收缩/展开切换</button>
<div class="div1">
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
/*
* 需求：
* 1.点击btn1，向上滑动
* 2.点击btn3，向下滑动
* 3.点击btn3，向上/向下切换
*/
$(function (){
//1.点击btn1，向上滑动
$('#btn1').click(function () {
$('div').slideUp()
});
//2.点击btn3，向下滑动
$('#btn2').click(function () {
$('div').slideDown()
});
//3.点击btn3，向上/向下切换
$('#btn3').click(function () {
$('div').slideToggle(2000)
});
});
</script>
</body>
</html>
淡入淡出
说明：
不断改变元素的透明度来实现的。
方法：
fadeIn()：带动画的显示。
fadeOut()：带动画隐藏。
fadeToggle()：带动画切换显示/隐藏。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切换</button>
<div class="div1">
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
/*
* 需求：
* 1.点击btn1，慢慢淡出
* 无参
* 有参：
* 字符串参数
* 数字参数
* 2.点击btn3，慢慢淡入
* 3.点击btn3，淡出/淡入切换，动画结束时提示动画结束了
*
*/
$(function (){
//1.点击btn1，实现慢慢淡出
$('#btn1').click(function () {
//$('.div1').fadeOut();
//$('.div1').fadeOut(1000);
$('.div1').fadeOut('fast');
/*
* fast：200
* normal：400
* fast：600
*/
});
//2.点击btn3，实现慢慢淡入
$('#btn2').click(function () {
$('.div1').fadeIn();
});
//3.点击btn3，实现淡出/淡入切换
$('#btn3').click(function () {
$('.div1').fadeToggle(function () {
alert('动画结束了');
})
});
});
</script>
</body>
</html>
显示/隐藏
说明：
不断改变元素的尺寸和透明度来实现，显示隐藏，默认没有动画。
方法：
show()：(不)带动画的显示。
hide()：(不)带动画的隐藏。
toggle()：(不)带动画的切换显示/隐藏。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
display: none;
}
</style>
</head>
<body>
<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>
<div class="div1">
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
/*
* 需求：
* 1.点击btn1，立即显示
* 2.点击btn2，慢慢显示
* 3.点击btn3，慢慢隐藏
* 4.点击btn4，切换显示/隐藏
*/
$(function (){
//1.点击btn1，立即显示
$('#btn1').click(function () {
$('div').show();
});
//2.点击btn2，慢慢显示
$('#btn2').click(function () {
$('div').show(1000);
});
//3.点击btn3，慢慢隐藏
$('#btn3').click(function () {
$('div').hide(2000);
});
//4.点击btn4，切换显示/隐藏
$('#btn4').click(function () {
$('div').toggle();
});
});
</script>
</body>
</html>
自定义
说明：
jQuery动画本质是在指定时间内不断改变元素样式值来实现的。
方法：
animate()：自定义动画效果的动画。
stop()：停止动画。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background: red;
}
</style>
</head>
<body>
<button id="btn1">逐渐扩大</button>
<button id="btn2">移动到指定位置</button>
<button id="btn3">移动指定距离</button>
<button id="btn4">停止动画</button>
<div class="div1">
爱在西元前
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
/*
* 需求：
* 1.逐渐扩大
* 1)宽/高都扩为200px
* 2)宽先扩为200px，高后扩为200px
* 2.移动到指定位置
* 1)移动到(500, 100)处
* 2)移动到(100, 20)处
* 3.移动指定的距离
* 1)移动距离为(100, 50)
* 2)移动距离为(-100, -20)
* 4.停止动画
*/
var $div1 = $('.div1');
/*
* 1.逐渐扩大
* 1)宽/高都扩为200px
* 2)宽先扩为200px，高后扩为200px
*/
$('#btn1').click(function () {
//宽/高都扩为200px
$div1.animate({
width: 200,
height: '200px'
}, 1000);
//宽先扩为200px，高后扩为200px
$div1.animate({
width: 200
}, 2000)
.animate({
height: 200
}, 2000);
});
/*
* 2.移动到指定位置
* 1)移动到(500, 100)处
* 2)移动到(100, 20)处
*/
$('#btn2').click(function () {
//移动到(500, 100)处
$div1.animate({
left: 500,
top: 100
}, 1000);
//移动到(100, 20)处
$div1.animate({
left: 100,
top: 20
}, 1000);
});
/*
* 3.移动指定的距离
* 1)移动距离为(100, 50)
* 2)移动距离为(-100, -20)
*/
$('#btn3').click(function () {
//移动距离为(100, 50)
$div1.animate({
left: '+=100',
top: '+=50'
}, 1000);
//移动距离为(-100, -20)
$div1.animate({
left: '-=100',
top: '-=20'
}, 1000)
});
/*
* 4.停止动画
*/
$('#btn4').click(function () {
$div1.stop();//只停止当前运行的动画(后面其它动画还会运行)
//$div1.stop(true);//停止所有动画
//$div1.stop(true, true);
});
</script>
</body>
</html>