CSS動畫hover效果-jQuery Blend

我們常常使用css的:hover指令，讓使用者在滑鼠滑過的時候有變換圖片的效果，不過css只能做直接把圖片換掉的動作，如果我們想要做更炫的效果，比如漸變效果，就可以使用jQuery Blend這個外掛。

首先可以先到官網去下載plugin，裡面有範例跟說明。

使用方法很簡單，先照原本使用:hover的方式，指定給元素原本的狀態跟hover的狀態，因為我想要有按下去的效果，所以我也寫了active的狀態。

然後將blend();指定給想要套用效果的元素就可以了。
Format: $('selector').blend(speed, callback);
有一點要注意的是，如果只有給:hover的話，只有移入會漸變，移出不會，想要移出也有漸變效果，就必須增加一個"元素.hover"的樣式，這個樣式設的跟"元素:hover"一樣就可以了。

觀看效果，這是我為了最近的系統寫的東西，真正的系統上是按了會關機的喔。