JQUERY的动画机制

jQuery 吸引我的就是他的动画机制，可能也吸引了无数后台开发和前台开发人员，下面我们一起来看看：

1、show() 和 hide() 方法
show() 和 hide() 方法是 jQuery 中最基本的方法，他们的作用是对某一或某些元素的显示或隐藏：

   1:  $("#input").focus(function(){   2:      $(this).hide();   3:  });   4:  $("#input").blur(function(){   5:      $(this).show();   6:  }););上段代码的作用是当 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:  });2、fadeIn()、fadeOut()、slideDown() 和 slideUp() 方法
fadeIn() 与 fadeOut() 方法是仅仅通过改变元素的透明度来实现显示与隐藏的过渡的。slideDown() 与 slideUp() 则是通过改变元素的高度实现显示与隐藏的动画。参数与 show()、hide() 的参数相同。

3、自定义动画 animate() 方法
实际使用过程中，上述的几种动画特效都不一定能够满足需求，所以 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 事件；上面的动画效果可以看到 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();4、停止动画 stop() 方法
上面的动画的例子效果挺玄，但是当我们很野蛮的不停的让 #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();有人或许会问我，怎么不依次实现两个 animate() 动画了呢？那样效果炫多了！也有人可能是认为这是为了节省页面。其实真正的原因是因为如果现在依次实现多个 animate() 动画的时候会杯具。自己可以试试。解决办法是给 animate() 传入一个参数：true 实现多个 animate() 动画的共存。

 

5、判断元素是否正在进行动画
判断元素是否在执行动画，只有在元素无正在执行动画时候才给元素添加动画。判断元素是否正在进行动画需要用到基本过滤选择器：:animated 代码如下：

   1:  if(!$(this).is(":animated")){   2:      //code omitted here...   3:  }6、toggle() 、slideToggle()、fadeTo() 方法
toggle() 方法是反复调用 show() 和 hide() 方法。slideToggle() 方法则是反复调用 slideDown() 与 slideUp() 方法。

fadeTo() 方法是调整元素到指定透明度的方法，有两个参数，第一个是时间的毫秒数，第二个是透明度值，用法如下：

   1:  $("#input").mouseover(function(){   2:      $(this).fadeTo(600,0.3);   3:  });---EOF---

jQuery (⊙o⊙)…

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mzule/archive/2011/02/18/6193810.aspx