jQuery动画

一，.hide()和.show()

.hide([duration ] [,easing ] [,complete ])
.hide(隐藏完这个过程执行的时间 ,隐藏的方式, 完成隐藏后执行的函数)

1， duration：动画持续多久
2，easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
3，complete：在动画完成时执行的函数

比起display的设置，优点：
1，这种隐藏展示，可以设置一些效果
2，不会改变DOM节点元素的display值（如果dom节点原本display为inline或inline-block,那么设置display来达到隐藏展示会改变节点本身的display属性）

.toggle( [duration ] [, easing ] [, complete ] )

用来切换元素的隐藏、显示

$("button").on("click",function(){
        $("p").toggle()
})

单击按钮，如果p本来显示在页面上，那么隐藏，否则相反

使用show和hide实现toggle的功能
方法一（设置状态）：

 var isshow=1;
 $("button").on("click",function(){
 if(isshow===1){
       $("p").hide();
       isshow=0;
   }else{
    $("p").show();
    isshow=1;
  }
});

方法二（判断display是不是none）

 var $p=$("p");
 $("button").on("click",function(){

 if($p.css("display")==="none"){
    $p.show();
 }else{
$p.hide();
}
});

二，渐变（透明度的变化）

.fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素，参数含义和上面相同

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

.fadeTo( duration, opacity [, easing ] [, complete ] )

到达指定透明度就不变了
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

.fadeToggle( [duration ] [, easing ] [, complete ] )

切换淡入淡出
通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
代码例子

三，滑动

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画
代码效果1
代码效果2

四，自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

设置某个元素终极状态的效果，和整个过程执行的时间
这是一个异步的动画，如果函数放到animate的后面，那么动画和函数一一起执行的（异步），如果函数放到animate的最后一个参数作为回调函数，那么这个函数在动画执行完毕，再执行函数（同步）
properties是传入一个属性对象{width:"10px",opcity:0.3}
效果代码
注意：

图片.png

注意：
自定义动画不能设置背景颜色动画

五，停止动画

有两种：
1，停到当前动画，.stop()
2，清空当前队列里面的所有动画，停止所有动画，.finsh()

六，防止用户重复点击（类似ajax重复（正在发送又单击一次）发送请求）

解决办法：设置一个状态锁
var a=false
判断a=false,执行动画，正在执行动画（正在发送请求），a=true
动画执行完（客户端得到响应），a=false
代码示例