老程序员分享：jQuery笔记（四）jQuery中的动画-阿里云开发者社区

jQuery最吸引人的地方莫过于能做出绚丽的动画了，也是能极大提高用户体验的地方，这次我们就来一探jQuery中的动画！

一. show()方法和hide()方法

show()方法与hide()方法是jQuery中最基本的动画方法，hide()方法设置是将所匹配的元素的样式display甚至为none。使用方法也很简单。

$("element").show(); //将元素element显示

$("element").hide(); //将元素element隐藏

$("element").css("display","none"); //将元素element隐藏,hide()方法效果一致。

如果仅仅是这样，那么丝毫体现不出jQuery中的强大，动画至少要让元素感觉是动起来的感觉！那么这种效果应该怎么做呢，其实很简单，需要在show()与hide()里面添上参数即可，添上的参数代表在多长时间内进行显示，或是多长事件内进行小时，所需注意的是参数的单位为毫秒，比如说$(“element”).show(3000);在3000毫秒内显示，即3秒种内显示完成。这种方法在显示或者隐藏的时候，内容与透明图都是渐进的显示或隐藏的，所以有一种动画的感觉。二. fadeIn()方法和fadeOut()方法

fadeIn()、fadeOut()与show()、hide()的差别就在与它们只改变其透明度，简单而言，其效果就是要实现淡进、淡出的效果。该方法的具体使用情况参考上例。

三.slideUp()和slideDown()方法

slideUp()和slideDown()方法与show()、hide()方法的差别就在于其改变的是元素的高度，使元素由上而下的展示，就仿佛拉开上下式的那种窗帘的感觉一样！我们还是来看一个具体的实例。

[span class="hljs-name">script type="text/javascript"

//toggle()被弃之后的替代方法

var i=0;

$(function () {

$("h5.head").click(function () {

if(i==0){

$(this).next().slideDown(2000); //在2秒内完成展示

i=1;

}else{

$(this).next().slideUp(2000); //在2秒内完成收缩

i=0;

}

})

[span class="hljs-name">div id="panel"

[span class="hljs-name">h5 class="head"

[span class="hljs-name">div class="content"br />

[span class="hljs-name">p

其显示效果就会如图1所示，是逐渐拉开的。

另外我们还可以在参数里面通过具体的数字来设置快慢程度，或者使用”slow”、”normal”、”fast”来控制速度。

四. 自定义动画方法 animate()

事实上，上面介绍的动画远远不能满足于我们的需求，很多时候，我们必须自定义我们的动画，下面就来说说自定义的动画。自定义动画是通过方法animate()方法来实现的。其语法结构为：animate(params,speed,callback);第一个包含央视属性及值的映射。第二个参数speed是表示速度的参数，为可选参数。第三个参数是指在动画完成之后执行的函数，也是可选参数。下面我们以一个具体的例子来说明。我们做一个动画效果。先看HTML代码。

[span class="hljs-name">style type="text/css"

#panel

{

position:relative;

Width＜/span>:100px;

Height＜/span>:100px;

border:1px solid #0050D0;

background:#111D1F;

cursor:pointer;

}

[span class="hljs-name">body

[span class="hljs-name">div id="panel"

即为一个正方形的div区域，如图2所示。我们的目标就是要是这个正方形区域动起来，使其动起来！其目标效果是：先使其向右移动，然后在向右移动的时候，我们使其高度也同时增加，当向右移动到一定程度的时候，我们再试其向下移动，并使宽度增加，最后移动到目标位置后，在另图形消失！具体jQuery代码如下：

[span class="hljs-name">script type="text/javascript"

$(function () { //加载DOM

$("#panel").css("opacity", "0.5"); //先设置div区域的不透明度

$("#panel").click(function () {

$(this).animate({ left: "400px", Height＜/span>: "200px", opacity: "1" }, 3000) //令区域在3秒内向右移动,移动的过程中使高度调至

为200px

.animate({ top: "200px", Width＜/span>: "200px" }, 3000) //令区域在3秒内向下移动,并使宽度调至为200px

.fadeOut(); //令其逐渐淡出

});

你也可以动手试试其效果！

五. toggle().slideToggle(),fadeTo(),fadeToggle()方法

toggle()用来切换元素的可见状态。如果元素可见，则转换为隐藏，如果元素是隐藏的，则切换为隐藏的，如果元素是隐藏的，则切换为可见的。

我们看下述代码。

$("#element").click(function{

$(this).toggle();

});

其效果与下述代码是一样的。

$("#element").toggle(function(){

$(this).hide();

},function(){

$(this).show();

});

换句话说，toggle()就是用于替代hide()，show()的综合效果的，正如jQuery所倡导的那句话：Do more,Write less!

说完了toggle()，我们再来看看slideToggle(),其是通过高度变化来切换匹配元素的可见性。我相信您也一定知道这个方法的出现是用来代替哪两个方法的组合的了？正是slideUp与slideDown。

fadeTo()方法可以把匹配元素的不透明度以渐进的方式调整到指定的值。

哪fadeToggle()呢？一句话你就明白：它的出现是为了代替fadeIn与fadeOut()的组合效果！

六. jQuery中的动画的各个方法总结比较

说了那么多方法，估计大家都迷糊了，下面列个表格进行比较一番，以区分他们的区别。同时，也便于大家在忘了动画中的一些方法时，可以快速查询。见表1。

方法名

说明

show()和hide()同时修改匹配元素的高度、宽度和不透明度fadeIn()和fadeOut()只改变不透明度slideUp()和slideDown()只改变高度fadeTo()只改变不透明度toogle()用来代替show()和hide()，所以能够同时修改匹配元素的高度、宽度和不透明度slideToggle()用来代替slideUp()方法和slideDown()方法，只修改高度fadeToggle()用来代替fadeIn()方法和fadeOut()方法，只修改不透明度animate()自定义方法，具体介绍见第四节，事实上，以上方法都是调用animate()方法七. //代码效果参考：http://www.lyjsj.net.cn/wx/art_23953.html

动画示例效果说了这么多方法，那么具体来一个详细点的Demo示例吧，来好好体会下jQuery给网页带来的变化！我们所有做的效果就是类似于在视频网站上，可以动态滑动的视频或者图片，首先我们绘制好我们的html代码，具体如下:

[span class="hljs-name">div class="v_show"

[span class="hljs-name">div class="v_caption"

[span class="hljs-name">h2 class="cartoon" title="卡通动漫"

卡通动漫

[span class="hljs-name">div class="highlight_tip"

[span class="hljs-name">span class="current"spanspanspan

[span class="hljs-name">div class="change_btn"

[span class="hljs-name">span class="prev"span class="next"

[span class="hljs-name">ema href="#"

[span class="hljs-name">div class="v_content"

[span class="hljs-name">div class="v_content_list"

[span class="hljs-name">ul