jQuery动画特效

本文主要跟你们分享jQuery隐藏与显示（hide，show，toggle） 上卷与下拉（slideDown，slideUp,slideToggle） 淡入淡出（fadeOut，fadeIn，fadeToggle，fadeTo） 自定义动画（animate,stop）

1、jQuery的隐藏和显示动画

在jQuery中，您可使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$('p').hide();
$('p').show();

固然，你能够给元素加上鼠标事件，例如当点击某个元素的时候，可让它隐藏或者显示；

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

在jQuery中还有一种更方便的方法控制元素的隐藏和显示，即经过toggle()来回的切换hide()和show()方法；这样上面的代码就能够这样写：

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

当给这几个方法加入参数时，它们就会成为一个动画方法。咱们就拿hide()方法举例:

$('p').hide(speed,callback);

hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操做，快捷参数：.hide("fast/slow")：
例如：

$("button").click(function() {
   $('p').hide({
     duration:3000,
     complete:function() {
        alert('3000ms动画执行完毕')
     }
   });
});

或者：

$("button").click(function() {
   $('p').hide(3000,function() {
      alert('3000ms动画执行完毕');
   });
});

注意：

1. show与hide方法是修改元素的display属性，经过visibility属性修改须要经过css方法单独设置
2. 若是样式中使用！important，好比display:none !important，想让.show()方法正常工做，必须使用.css('display','block !important')重写样式。
3. 若是让show与hide成为一个动画，那么默认执行动画会改变元素的高度，透明度；

2、上卷下拉效果

jQuery中下拉动画能够由slideDown()实现，
用法：$(selector).slideDown(speed,callback);

可选的speed参数规定效果的时长。它能够取如下值：“slow”，“fast”或毫秒值。

可选的callback参数是滑动完成后所执行的函数名称。

例：

$("button").click(function() {
  $('p').slideDown(3000);
});

同理的下拉动画能够由sildeUp()实现，它的语法也和上卷方法类似，同时还可使用slideToggle()方法在sildeDown()与slideUp()方法之间切换。实现的方法也与上卷的类似，在这里我就不写出来了。

3、淡入淡出效果

jQuery的淡入淡出效果能够由fadeOut(),fadeIn()或者fadeToggle()实现，这里就介绍一下fadeOut()方法，其余两个也是类似的；

用法：$(selector).fadeOut(speed,callback);

可选的speed参数规定效果的时长。它能够取如下值：“slow”，“fast”或毫秒。

可选的callback参数是fading完成后所执行的函数名称。

例：

$('button').click(function() {
   $('#div1').fadeOut();
   $('#div2').fadeOut("slow");
   $('#div3').fadeOut(3000);
});

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，可是他们都有个共同的特色，变化的区间要么是0，要么是1，当opacity的值为0时，即隐藏该元素设置为display:none;

那么在这里就要介绍一个特殊的淡入效果fadeTo();
fadeTo()方法容许渐变为给定的不透明度(值介于0与1之间).

$(selector).fadeTo(speed,opacity,callback);

必须的speed参数规定效果的时长。它能够取如下值：“slow”，“fast”或毫秒。

jQuery中toggle与slideToggle以及fadeToggle的比较：

(1)toggle：切换显示与隐藏效果。
(2)sildeToggle：切换上下拉卷效果。
(3)fadeToggle：却还淡入淡出效果。

toggle与slideToggle细节区别：

(1) toggle:动态效果为从右至左，横向动做，toggle经过display来判断切换全部匹配元素的可见性；

(2)slideToggle：动态效果从下至上，竖向动做，slideToggle经过高度变化来切换全部匹配元素的可见性。

4、自定义动画

jQuery中动画由animation()方法实现。

用法：$(selector).animation({params},speed,callback);

必须的params参数定义造成动画的css属性，json写法。

可选的speed参数规定效果的时长，它能够取如下值：“slow”，“fast”或毫秒。

可选的callback参数是动画完成后所执行的函数名称。

例：

$(selector).click(function() {
  $("div").animation({
    left:'100px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
    });
});

注意：

当使用animation()时，必须使用camel标记法书写全部的属性名，好比，必须使用paddingLeft而不是padding-left。

animation()使用相对值，能够定义相对值（该值相对于元素的当前值），须要在值的前面加上+=或-=；

例：

$("button").click(function() {
   $('div').animation({
     left:'100px',
     height:'+=150px',
     width:'+=100px'
     });
});

animation()使用队列功能，若是你在彼此以后编写多个animation（）调用，jQuery会建立包含这些方法调用的内部队列。而后逐一运行这些animation调用。

5、jQuery其余核心方法

jQuery中中止动画stop

stop（）方法用于中止动画或效果，在它们完成以前。stop()方法使用于全部jQuery效果函数，包括滑动、淡入淡出和自定义动画。

用法：$(selector).stop(stopAll,goToEnd);

可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅中止活动的动画，运行任何排入队列的动画向后执行。

可选的goToEnd参数规定是否当即完成当前动画。默认是false。

所以，默认地，stop()会清除在被选元素上指定的当前动画。

(1)、stop()中止当前动画，点击在暂停处继续开始

(2)、stop(true);若是统一元素调用多个动画方法，还没有被执行的动画被放置在元素的效果队列中。这些动画不会开始，知道第一个完成。当调用.stop()的时候，队列中的下一个动画当即开始。若是goTOEnd参数提供true值，那么在队列的动画被删除并永远不会运行。

(3)、stop(true,true)；当前动画将中止，但该元素上的css属性被马上改为动画的目标值。

例：

$('button').animation({
  height:300
},5000);

$('button').animation({
  width:300
},500);

$('button').animation({
  opacity:0.6
},5000);

分析：

（1）、stop（）；只会中止第一个动画，第二第三个继续；

（2）、stop（true）；中止全部动画；

（3）、stop（true，true）；中止动画，直接跳到第一个动画的最终状态。

谢谢你们阅读本文章，有什么建议均可以在评论中写出来，我会积极修改。