jQuery 中的动画特效

来源：互联网发布：西安财经行知学院学费编辑：程序博客网时间：2024/05/16 10:18

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

1、show() 和 hide() 方法

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:  });

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();

.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() 动画的共存。

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⊙)…