2011年8月3日 星期三

CSS動畫hover效果-jQuery Blend

284525_2202519752313_5599860_n

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

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

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

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

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

0 意見:

Related Posts Plugin for WordPress, Blogger...