動畫效果

$("button").click(function(){
  $("div").animate({left:'250px'});
});

要注意的是，缺省情況下，所有 HTML 元素的位置的固定的，不能移動，因此如果需要修改 HTML 元素的位置，需要事先將它們的 CSS 屬性的位置設(shè)置為 relative, fixed, 或 absolute。

使用 animate 修改多個屬性

下面的例子，可以使用 animate 同時修改多個屬性：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

注意：基本所有的 CSS 屬性都可以在 animation 中使用，顏色修改不在 jQuery 核心庫中，需要Color Animiation 插件來完成。

使用屬性相對值

對于 CSS 屬性，除了上面使用的絕對大小，也可以使用相對值來定義，使用 “+”“-”。

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用預(yù)定義的值

也可以使用預(yù)定義的值為屬性賦值。比如”show”, “hide”, 或 “toggle”:

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

使用隊列功能

缺省 jQuery 支持將多個 animation 功能串起來構(gòu)從一個隊列，然后一個一個的執(zhí)行隊列中的指令。

比如：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

或

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});