Jquery的动画效果能够轻松的为网页添加动画效果，为网页带来了新的活力。
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()方法只改变元素的不透明度借以改变元素的显示状态。例：
$("btnfade").toggle(function(){$("p").hide();},function(){$("p").show();});
该示例通过改变元素的不透明度改变元素的是显示状态，同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。
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在动画完成时执行的函数，也是可选的。
自定义一个简单动画使元素中页面飘动,示例如下：
先定义样式
<style
type="text/css">
.panel
{
position:
relative; //位置样式必须为relative或者absolute.
width: 200px;
height: 200px;
border: 1px solid;
background: #96E555;
}
</style>
页面中定义一个div元素class="panel"。
<div class="panel"></div>
设置元素点击事件时候触发动画事件，事件绑定函数如下：
$(".panel").click(function () {
$(this).animate({ top: "100px", left: "500px" },
1000);
});
这样一个简单的动画就完成了，页面加载完成后当点击元素时候div元素会中1秒内，移动到指定位置。
上面只实现了一次性位置改变，也实现累加改变位置动画，只需要改变事件绑定函数如下:
$(".panel").click(function () {
$(this).animate({ top:"+=100px", left: "+=50px" },
1000);
});
这样连续点击div元素时元素位置会连续改变。实现了动画的累加。
上面的动画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);
});
像这样的动画的执行按顺序执行，又可以称为"动画队列"。
在动画结束后可以使用回调函数改变元素的样式、内容等来达到想要的显示效果。如在div元素示例中添加回调函数如下：
$(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000, function () { $(this).css("border", "5px solid blue"); });
通过在最后一个animate方法加添加回调函数，在动画结束后回调函数会改变元素的边框宽度和颜色。
上面的示例中如果连续点击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);}
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"); });
});
使用方法改变元素的透明度，然后使用回调函数打印元素的当前透明度。
原文地址：http://www.cnblogs.com/bro-ma/p/3084789.html
