jQuery 動畫效果廣泛用于 Web 開發中，它能創建各種各樣的動畫效果，使網頁更加生動有趣。jQuery anim 函數是其中一個實現動畫效果的方法，下面我們來深入了解。

// jQuery anim 函數格式
$(selector).animate({styles},speed,easing,callback)
// 示例
$("div").animate({left:'250px'},2000);

其中，selector 表示要執行動畫的元素選擇器，styles 表示要改變的 CSS 屬性和屬性值，speed 表示動畫的時長（毫秒），easing 表示動畫的緩動效果（默認是 "swing"），callback 表示動畫執行完畢后回調的函數。

// styles 可以多個
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},2000);
// 使用相對值
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
},2000);
});

styles 也可以設置多個 CSS 屬性，而且可以使用相對值（+= 或 -=）實現相對于當前值的增加或減少。如果要在一定時間內逐漸改變多個屬性，可以在 styles 中指定多個屬性。

// 緩動效果
$("div").animate({left:'250px'},2000);
$("div").animate({top:'250px'},2000);
$("div").animate({fontsize:'3em'},2000);
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},"slow");

easing 參數可以指定動畫效果的緩動類型。"swing" 為默認值，該值效果最為常用。可選的值還有 "linear"、"easeIn"、"easeOut" 和 "easeInOut" 等。同時，還可以自定義緩動函數。

// 回調函數
$("div").animate({
left:'250px'
},2000,function(){
alert("動畫執行完畢");
});

callback 參數可以指定在動畫執行完畢后回調的函數。如果要在動畫執行完畢后執行某些操作，可以在該參數中指定回調函數。

注：jQuery anim 函數只對數值屬性有效，對于不能設置數值的屬性，如 color，需要使用 jQuery UI。