jQuery 吸引我的就是他的动画机制，可能也吸引了无数后台开发和前台开发人员，下面我们一起来看看：
show() 和 hide() 方法是 jQuery 中最基本的方法，他们的作用是对某一或某些元素的显示或隐藏：
1: $("#input").focus(function(){ 2: $(this).hide(); 3: }); 4: $("#input").blur(function(){ 5: $(this).show(); 6: });); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }上段代码的作用是当 id 为 input 的元素得到焦点则隐藏，失去焦点则显示。上段代码的显示与隐藏是非常生硬的，要实现优雅的动画效果，我们仅需要在 show() 和 hide() 方法中传入参数即可，参数有 slow、normal、fast 等字符串参数，或者直接传入动画持续时间的毫秒数。我们可以将代码改写如下实现优雅的动画效果：
1: $("#input").focus(function(){ 2: $(this).hide(2000); 3: }); 4: $("#input").blur(function(){ 5: $(this).show("fast"); 6: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }fadeIn() 与 fadeOut() 方法是仅仅通过改变元素的透明度来实现显示与隐藏的过渡的。slideDown() 与 slideUp() 则是通过改变元素的高度实现显示与隐藏的动画。参数与 show()、hide() 的参数相同。
实际使用过程中，上述的几种动画特效都不一定能够满足需求，所以 jQuery 提供了自定义动画的方法 animate() 以满足对特定动画效果的需求。
animate() 方法可以接受三个参数，其中后两个参数是可选的：animate(params,speed,callback);
params 参数是动画作用后的最终效果，如 {background:"#eeeeee",color:"#ffffff"};
speed 参数顾名思义就是动画的持续时间；
callback 参数是执行这个动画后执行的方法，即回调方法。
示例如下：
1: var input_function = function(){ 2: $("#input").val("Please input here.."); 3: } 4: var $width; 5: var $height 6: $("#input").focus(function(){ 7: $width = $(this).css("width"); 8: $height = $(this).css("height"); 9: $(this).animate({width:"80%",height:"100px"},500,function(){ 10: $(this).val(""); 11: });//直接使用匿名方法； 12: }); 13: $("#input").blur(function(){ 14: $(this).animate({width:$width,height:$height},500,input_function);//使用已经定义好了的方法； 15: }); 16: $("#input").blur();//页面加载结束即调用 #input 的 blur 事件； .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }上面的动画效果可以看到 width 和 height 的改变是同步的，有时候我们需要先改变 width ，再改变 height ，这是我们应该分解 width 和 height 形成多个 animate() 动画，多个 animate() 动画是依次执行的：
1: var input_function = function(){ 2: $("#input").val("Please input here.."); 3: } 4: var $width; 5: var $height 6: $("#input").focus(function(){ 7: $width = $(this).css("width"); 8: $height = $(this).css("height"); 9: $(this).animate({width:"80%"},500,function(){ 10: $(this).val(""); 11: }) 12: .animate({height:"100px"},500); 13: }); 14: $("#input").blur(function(){ 15: $(this).animate({height:$height},500,input_function) 16: .animate({width:$width},500); 17: }); 18: $("#input").blur(); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }上面的动画的例子效果挺玄，但是当我们很野蛮的不停的让 #input 得到焦点、失去焦点、得到焦点、失去焦点…依次反复，不过几轮就会发现 jQuery 的动画特效杯具了，卡在那儿动不了了。因为我们在执行得到焦点的动画的过程中又让元素是去焦点，结果在执行得到焦点的动画之后又要执行是去焦点的动画，反反复复，jQuery 就晕了。
解决这个问题，我们可以通过调用 stop() 方法在执行下一个动画之前结束未完成的动画：
1: var input_function = function(){ 2: $("#input").val("Please input here.."); 3: } 4: var $width; 5: var $height 6: $("#input").mouseover(function(){ 7: $width = $(this).css("width"); 8: $height = $(this).css("height"); 9: $(this).stop() 10: .animate({width:"80%"},500,function(){ 11: $(this).val(""); 12: }); 13: }); 14: $("#input").mouseout(function(){ 15: $(this).stop() 16: .animate({width:$width},500,input_function); 17: }); 18: $("#input").blur();.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }有人或许会问我，怎么不依次实现两个 animate() 动画了呢？那样效果炫多了！也有人可能是认为这是为了节省页面。其实真正的原因是因为如果现在依次实现多个 animate() 动画的时候会杯具。自己可以试试。解决办法是给 animate() 传入一个参数：true 实现多个 animate() 动画的共存。
判断元素是否在执行动画，只有在元素无正在执行动画时候才给元素添加动画。判断元素是否正在进行动画需要用到基本过滤选择器：:animated 代码如下：
1: if(!$(this).is(":animated")){ 2: //code omitted here... 3: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }toggle() 方法是反复调用 show() 和 hide() 方法。slideToggle() 方法则是反复调用 slideDown() 与 slideUp() 方法。
fadeTo() 方法是调整元素到指定透明度的方法，有两个参数，第一个是时间的毫秒数，第二个是透明度值，用法如下：
1: $("#input").mouseover(function(){ 2: $(this).fadeTo(600,0.3); 3: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }---EOF---
jQuery (⊙o⊙)…
