週三又到了

週三又到了，但是本週三（2010/02/03）聚會因太多人無法前來，暫停一次。

最近弄了一個 float 動畫，點到的 block 我故意隱藏起來，讓你知道這是真的依照 float 規則來動。

點子剛出現時，有用 iChat 討論。一開始認為要弄一個計算位置的程式來跑，但後來有人建議可以複製一份在背景，讓瀏覽器跑 float 後，取得位置來做動畫。但後來又想到直接詢問母元素不就好了。

於是寫了 li.item > a 的文件，並且套用樣式：

.item { flaot: left }

.item a { position: absolute }

然後 a 的 top, left 位置用 $(“.item”).position() 就能解決了！

—

關於這裡頭的 a 元素要怎麼動，有兩種方法：

CSS transition：以 WebKit 引擎為例，.item a 在 CSS 中先設好 -webkit-transition-property: top, left; -webkit-transition-duration: .5s, .5s; 然後直接指定 top, left 就可以了！（缺點：只有 Safari, Chrome 支援，但是 Firefox 3.7 alpha, Opera 10.5 alpha 也都開始支援了！優點：可以加上 CSS Transformation 更屌！）
jQuery .animate()：直接 .animate() 過去該到達的位置。似乎是拜 jQuery 1.4 效能所賜，就算移動全部的元素，連在 IE 底下也能順暢執行！（缺點：耗效能、CSS Transformation 一樣要放棄。優點：大家都看得到動畫。）

—

後來應用 PTT 名人做了兩個版本：

怎麼選都可以跑，唯獨 jQuery .animate() 點太快時會有錯誤狀況產生。在 CSS Transition 的部份還加入了亂數旋轉程式，可以讓大家立正，但只要一移動、縮放視窗，就⋯⋯XD。

以上為 RGBA 本週分享，希望下週可以繼續聚會大家一起討論，謝謝！

—

Origin: Even Wu / PTT / #1BQ7hGKU (Web_Design)

Reviewed by: Evadne Wu 2010/02/04

—

Addendum:

As of WebKit, consult Surfin’ Safari while in doubt:

CSS Transformation
http://webkit.org/blog/130/css-transforms/