jQuery封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。
我们这里就简单介绍一下滑动滑出，隐藏显示，淡出淡入，自定义动画这四种简单的动画方式
参数
不管是显示显示隐藏，滑动，还是淡出淡入，三种方式的参数和效果大致是一样的，这里在分别讲述方式前简述一下参数，若有细节则单独领出来讲
该类方式有三个参数，分别用逗号分开，可以全部省略。但若无任何参数，无动画直接显示
[spped]:指的的速度,可加可不加，通常有两种：
?
1.三种预定速度之一的字符串
? ? ?slow:表示缓慢显示
?? ?normal：表示一般速度显示
?? ?fast：表示快速
?
2.用数字表示动画时长的毫秒数
不需要任何引号和单位，用数字则为动画时长的毫秒数
[easing]:用来指定切换效果，默认swing
“swing” - 在开头/结尾移动慢，在中间移动快
“linear” - 匀速移动
[fn]:回调函数，在动画完成执行的函数，每个元素执行一次
一、显示隐藏
1.show()
show()方式可以让隐藏的元素显示出来。
2.hiden()
show()方式可以让隐藏的元素隐藏。
1.toggle()
show()方式可以让元素在隐藏和显示两种状态切换。
综合案例
示例代码:
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
}
</style>
<script src="../jquery.min.js"></script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
// 一般情况下不加参数，直接显示隐藏就可以了
$(function() {
// hide()隐藏
$('button').eq(1).click(function() {
$('div').hide("fast", function() {});
});
// show()显示
$('button').eq(0).click(function() {
$('div').show("slow", function() {});
});
// 切换
$('button').eq(2).click(function() {
$('div').toggle(1000);
});
});
</script>
效果:
二、淡出淡入
1.fadeIn()
淡入动画
2.fadeOut()
淡出动画
3.fadeToggle()
淡出淡入切换
参数
fadeTo([speed],opacity,[easing],[fn])
其中[speed],[easing],[fn]和其他方式没有任何区别且可以省略
opacity：表示的为透明度，取值范围[0~1],越大透明度越高
综合案例
代码：
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="../jquery.min.js">
</script>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$('button').eq(0).click(function() {
// 淡入动画fadeIn()
$('div').stop().fadeIn(1000);
});
$('button').eq(1).click(function() {
// 淡出动画fadeOut()
$('div').stop().fadeOut(1000);
});
$('button').eq(2).click(function() {
// 淡入淡出动画fadeToggle()
$('div').stop().fadeToggle(1000);
});
$('button').eq(2).click(function() {
// 淡入淡出动画fadeToggle()
$('div').stop().fadeToggle(1000);
});
$('button').eq(3).click(function() {
// 用渐进方式调整不透明度fadeTo()
// 速度和透明度两个参数必须写
$('div').stop().fadeTo(1000, 0.5);
});
});
</script>
效果：
三.滑动
1.slideDown()
滑出元素
2.slideUp()
滑入元素
4.slideToggle()
以滑动动画切换元素状态
综合案例
案例代码：
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
// 下滑动slideDown()
$('button').eq(0).click(function() {
$("div").slideDown();
});
// 上滑动slideUp()
$('button').eq(1).click(function() {
$("div").slideUp();
});
// 滑动切换
$('button').eq(2).click(function() {
$("div").slideToggle();
});
});
</script>
效果:
四. animate()
自定义动画
参数
animate(params,[spped],[easing],[fn])
其中[spped],[easing],[fn]三个参数和上述相同，不再多述我们主要讲述params。
params:
1.想要改变的样式属性，以对象形式填写
2.必须写
3.属性名可以不用加引号
4.如果是复合属性则需要采用驼峰命名
5.params:一般针对数字元素属性改变，对颜色类无效
案例
案例代码：
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<button>动起来</button>
<div>123</div>
<script>
$(function() {
$("button").click(function() {
$('div').animate({
left: 500,
top: 300,
opacity: .4,
});
});
});
</script>
效果：