jQuery自定义动画，animate()包装器方法

语法

1、$(selector).animate(styles,speed,easing,callback)

 参数：styles　　一个散列对象，指定动画结束时所支持的CSS样式应该达到的值。注：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）

　　　speed　　可选项，用于指定特效持续的时间。可以是若干毫秒或者是下列值 slow normal fast。如果省略或者指定为0，则不会有动画过程。

　　　easing　　可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swing linear

　　  callback　　可选。animate 函数执行完之后，要执行的函数。

返回值：包装集

eg.

1、自定义缩放动画

$("div.caption").click(function(){
  $("div.module")
  .css("position","relative")
  .animate(
  {opacity:0, top:$(window).height()-$(this).height()-$(this).position().top},
  "slow",
  function(){$(this).hide();}
  );

通过调整元素的TOP位置使其像页面底部移动来模拟掉落过程，同时，通过调整opacity试元素看起来好像消失了一样。最后再从显示器上删除元素（使用hide（））　　

2、自定义缩放动画

$("div.caption").click(function(){
  var position = $("div.module").position();
  $("div.module")
  .css({position:"absolute",
     　　top:position.top,
     　　left:position.left})
  .animate(
  {
   　　opacity:"hide",
   　　width:$(this).width()*5,
   　　height:$(this).height()*5,
   　　top:position.top-($(this).height()*4/2),
   　　left:position.left-($(this).width()*4/2)
  },
  "normal");　

在这个动画中，我们将不透明度减少到0的同时，把元素的尺寸增大到其原始尺寸的5倍，并且根据新的尺寸的一半大小来调整元素的位置，是的元素的中心保持原地不动。

<div class="module">
 　　<div class="caption"  style="height:20px;">
    　　 <span style="float:left;">Module Caption</span>
     　　<span class = "ui-icon ui-icon-carat-1-s" style="float:right"></span>
    </div>
    <div class="body" style="border-top:solid 1px gray;">
     thisdsfsadfsdfsadf sdafsdfdsfsdaf sdaflsdfdsfdsfdsaff sdfsdfdsf
    </div>
</div>

例子摘自《jQuery实战》