JQuery里面的动画的API

我们之前使用的是css3里面的一些属性比如说transition或者是animation或者是transform这样的上面的一些属性。而我在这里是要说一下JQuery里面的一些能够实现动画的API。

动画API

基本

1、show([s,[e],[fn]])（显示）
2、hide([s,[e],[fn]])（隐藏）
3、toggle([s],[e],[fn])（这个是点击后显示和隐藏）

这三个的参数是一样的：
第一个参数：null 或者是 duration（这个代表的是执行的时间）
第二个参数：easing（这个代表的是执行的快慢），这个参数可以为我们之前在css3上线的一些属性
第三个参数：function(){}（这个是代表的参数里面加上知己的要执行的一些代码炒作的）
show()和hide()是显示和影藏，他对元素的操作是通过设定元素的display属性的，同时也是显示的时候使用的元素的默认属性来显示的

.hide()的例子：

 //用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

.show()的例子：

//html代码
<p style="display: none">Hello</p>

//用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！
$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });

.toggle()的例子：

//用200毫秒将段落迅速切换显示状态，之后弹出一个对话框
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

滑动

1、slideDown([s],[e],[fn])（通过高度变化向下增大）
2、slideUp([s,[e],[fn]])（通过高度变化向上变小）
3、slideToggle([s],[e],[fn])（这个是上面两的综合）

这个的参数也是三个：
他们的参数和上面的基本动画里面的三个方法是一样的参数

.slideDown()的实例：

//用200毫秒快速将段落滑下，之后弹出一个对话框
//jQuery 代码:
$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

slideUp()的实例：

//用200毫秒快速将段落滑上，之后弹出一个对话框
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

.slideToggle()的实例：

//用200毫秒快速将段落滑上或滑下，之后弹出一个对话框

$("p").slideToggle("fast",function(){
   alert("Animation Done.");
 });

淡入淡出

1、fadeIn([s],[e],[fn])（这个是淡入）
2、fadeOut([s],[e],[fn])（这个是淡出）
3、fadeTo([[s],o,[e],[fn]])（这个是上面的两个的综合的效果）
4、fadeToggle([s,[e],[fn]])（把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。）

这些方法的参数是：

.fadeIn()的例子：

//用200毫秒快速将段落淡入，之后弹出一个对话框
("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

.fadeout()的例子：

//用200毫秒快速将段落淡出，之后弹出一个对话框
$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });

.fadeToggle()的例子：

//用600毫秒缓慢的将段落淡入
$("p").fadeToggle("slow","linear");

.fadeTo()的例子：

//用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeTo("slow", 0.66);

自定义

1、animate(p,[s],[e],[fn])（以上三组能做到的效果， animate都可以）
这个的参数是可以看下图：

注意：
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 “+=” 或 “-=” 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如(“user-select”, “none”); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

例子：

//HTML 代码:
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
//jQuery 代码:
//描述：让指定元素左右移动
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-50px'}, "slow");
});

2、stop([c],[j])（停止所有在指定元素上正在运行的动画）
注意：如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
参数：不是true就是false

例子：

//HTML 代码:
<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>
//jQuery 代码:
//描述：点击Go之后开始动画,点Stop之后会在当前位置停下来
// 开始动画
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});

3、delay(d,[q])（延时）
jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列。
参数：
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。

例子：

//在.slideUp() 和 .fadeIn()之间延时800毫秒。

//HTML 代码:
<div id="foo /">
//jQuery 代码:
$('#foo').slideUp(300).delay(800).fadeIn(400);

4、finish([queue])（停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画）
注意：当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。

如果第一个参数提供，该字符串表示的队列中的动画将被停止。

.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
参数：true false,他会停止动画队列中的名称
例：

//停止当前正在运行的动画

$("#complete").click(function(){
  $("div").finish();
});