Jquery基础之动画操作

　　 Jquery的动画效果能够轻松的为网页添加动画效果，为网页带来了新的活力。

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

　　show()方法和hide()方法是jquery中最基本的动画方法。使用show()方法会将隐藏的元素显示出来，使用hide()方法会将元素的属性设置为display:none。使用hide()方法会记住原来的display属性值，并把现在的display属性设置为none;show()方法会元素的属性设置为hide()前的属性值。

　　示例：

　　$("btnShowHide").toggle(function(){$("p").hide();},function(){$("p").show();});

　　该示例点击button按钮时候交替切换p元素的状态为隐藏和可见状态，此时该方法同css("diplay","none/block/inline")效果一样，但是hide()和show()方法可以带有参数调整动作的执行速度。分别为"slow","normal","fast",对应时间为0.6秒、0.4秒和0.2秒。也可设置整数指定执行时间数字计数级别是毫秒。如：("p").show(1000);该示例使p元素中1秒内显示完毕。也能添加回调事件函数。

二、fadeIn()方法和fadeOut()方法

　　fadeIn()方法和fadeOut()方法只改变元素的不透明度借以改变元素的显示状态。例：

　　$("btnfade").toggle(function(){$("p").hide();},function(){$("p").show();});

　　该示例通过改变元素的不透明度改变元素的是显示状态，同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。

　三、slideUp()方法和slideDown()方法

　　slideUp()方法和slideDown()方法通过改变元素的的显示状态。例：

　　$("btnHeight").toggle(function(){$("p").hide();},function(){$("p").show();});

　　该示例通过改变元素的高度改变元素的是显示状态，同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。

　四、自定义动画

　　前面三种类型动画方法满足用户的各种需求，需要采取一些高级的自定义动画来解决问题，Jquery中定义了animate()方法来实现自定义动画，语法结构为：animate(params,speed,callback);

　　参数如下：params一个包含样式属性及值的映射，比如：{width:"500",height:"300",....};speed速度参数，可选。callback在动画完成时执行的函数，也是可选的。

　 1、自定义简单动画

　　自定义一个简单动画使元素中页面飘动,示例如下：

　　先定义样式

页面中定义一个div元素class="panel"。

设置元素点击事件时候触发动画事件，事件绑定函数如下：

$(".panel").click(function () {
$(this).animate({ top: "100px", left: "500px" }, 1000);
});

这样一个简单的动画就完成了，页面加载完成后当点击元素时候div元素会中1秒内，移动到指定位置。

2、累加动画

上面只实现了一次性位置改变，也实现累加改变位置动画，只需要改变事件绑定函数如下:

$(".panel").click(function () {
$(this).animate({ top:"+=100px", left: "+=50px" }, 1000);
});

这样连续点击div元素时元素位置会连续改变。实现了动画的累加。

3、顺序动画

　　上面的动画top位置和left位置是同时改变的，也可以顺序执行位置改变动画，如下：

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

$(this).animate({ top: "+=50px" }, 1000);
$(this).animate({ left: "+=50px" }, 1000);
});

这样当点击div元素时候动画就会顺序执行先改变top位置，再改变left位置，连续点击连续改变。也可以改写成链式形式如下：

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

$(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000);
});

像这样的动画的执行按顺序执行，又可以称为"动画队列"。

4、回调函数

　　在动画结束后可以使用回调函数改变元素的样式、内容等来达到想要的显示效果。如在div元素示例中添加回调函数如下：

　　 $(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000, function () { $(this).css("border", "5px solid blue"); });

　　通过在最后一个animate方法加添加回调函数，在动画结束后回调函数会改变元素的边框宽度和颜色。

　 5、停止动画和动画状态

　　上面的示例中如果连续点击div元素，动画会一直执行相应的次数后才停止，使用stop()方法可以停止正在进行的动画。stop方法结构是stop([clearqueue],[gotoEnd])两个参数都是可选参数，参数都是bool值true或false。如果clearqueue为true则方法会清除动画队列，如果gotoEnd为true动画直接跳转到结束状态。以合成事件hover为例：使用上面的div元素为元素绑定hover事件如下：

　　$(".panel").hover(function(){$(this).stop().animate({height:"200px"},2000);},function(){$(this).stop().animate({height:"300px"},2000);});

　　该示例中使用无参数的stop()方法停止当前正在执行的动画然后执行stop()方法后面的新的动画。不带参数的stop方法停止的是当前正在执行的动画，如果是当前动画后有动画等待执行stop()方法后后面的动画会继续执行，此时需要使用带参数的stop方法停止动画并清空动画队列，或者使动画直接到达最后状态。

　　动画状态用于判断元素是否处理正在动画状态，判断方法和jquery选择器一样使用.is(":animated")方法来判断，使用该方法可以跟据元素是否处于动画状态来做出相应的操作。例：如果元素处理动画状态就不添加新的动画，否则添加新动画。

　　if(!$(".panel").is(":animated")){$(this).animate({left:"+=300"},2000);}

　6、交互的动画方法

　　Jquery提供了3种专门用于交互的动画方法:toggle(speed,[callback])、slideToggle(speed,[callback])、fadeTo(speed,opacity,[callback])。

　　toggle方法用于切换元素的可见性状态，如果元素是隐藏的则显示元素，如果元素是可见的则隐藏状态。例：

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

$(this).prev("div.panel").toggle(3000, function () { alert($("div.panel").is(":visible")); });

});

该示例使用toogle交互方法改变div元素的可见性，在动画结束后打印元素的当前可见性状态。

slideToggle方法用于通过改变高度改变元素的可见性状态，例：

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

$(this).prev("div.panel").slideToggle(3000, function () { alert($("div.panel").is(":visible")); });

});

该示例通过使用slideToggle方法改变元素的高度实现元素的可见性改变，最后在动画执行结束后执行回调函数打印元素的当前状态。

fadeTo方法用于改变元素的透明度，使用该方法也可以实现可见性的改变。例：

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

$(this).prev("div.panel").fadeTo(3000,0.2,function () { alert($("div.panel").css("opacity"); });

});

使用方法改变元素的透明度，然后使用回调函数打印元素的当前透明度。