金魚都能懂網頁設計入門 : JQuery動畫

因 jQuery 為許多開發者共同維護的框架，已經有許多開發者為了 jQuery 設計各式各樣的動畫資源。 除了讓你釐清觀念外，這堂課程也會教你如何去整合別人與自己的程式碼。

本篇文章將帶你深入了解 jQuery 動畫效果的使用方法，從基本的顯示與隱藏，到複雜的自訂動畫，並提供實用的代碼範例，讓你快速上手並靈活運用在實際開發中。

使用 jQuery 編寫動畫效果. 圖片輪播範例. 卡片範例.

透過Javascript + CSS的結合，網頁元素就可以自動變化顯現結果，產生動畫，但相關程式設計細節頗為瑣碎。 再一次，jQuery又讓複雜的事情變得簡單。 在jquery.js的核心程式裡，即內建了基本的動畫API，例如: 淡入淡出、放大縮小等等，而它們都基於同樣的原理 -- 在一定的時間長度內，將某個或多個CSS屬性值，由數值A遞增或遞減到數值B，這就是animate ()函數的使命。 原則上只要可以透過數字調整的CSS屬性都可用來產生動畫，例如: top、left、width、height、ma

jQuery 提供了豐富的動畫效果方法，讓你能夠輕鬆地為網頁元素添加視覺動畫效果，包括顯示/隱藏、淡入淡出、滑動效果，以及自訂動畫。

下面的例子演示 animate () 方法的简单应用。 它把 <div> 元素往右边移动了 250 像素： 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ 可以用 animate () 方法来操作所有 CSS 属性吗？ 是的，几乎可以！ 不过，需要记住一件重要的事情：当使用 animate () 时，必须使用 Camel 标记法书写所有的属性名，比

要執行動畫，有許多超越了熟悉技術的技術動畫片。 可以通過繪製，繪畫或拍攝對現實模型或實物模型反復進行的微小更改來生成圖片。