文字色のアニメーションについて

新規サイトを作るにあたり、
テキストリンクのロールオーバーには、
文字色アニメーションを使おうと思います。

文字色アニメーションを実装するための方法をざっと調べたところ、
以下、2種類を発見。

(1)CSS3 の transition プロパティを使って実装
(2)Jquery の プラグインを使って実装

 

(1)について、
【デモ】
■文字色アニメーション(CSS3版)
http://dog-ears.net/140715_color_animation01/index01.html

シンプルかつきれいにいけるものの、対応ブラウザが
webkit系(GoogleChrome、Safari等)
に、限られるとのこと。

ということで、パス。

【参考】
■CSS3リファレンス
http://www.htmq.com/css3/transition.shtml
■css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
http://kachibito.net/web-design/css3-transition-sample.html

 

次、(2)Jquery の プラグインを使う場合。

プラグインにもいくつかあるもよう。
取り急ぎ、「Jquery Color Plugin」を使ってみる。

【デモ】
■文字色アニメーション(Jquery Color Plugin版)
http://dog-ears.net/140715_color_animation01/index02.html

うーん。Jqueryのバージョン1.3.2だと動くんだけど、
1.9にしたら、動かなくなった・・・
[追記]1.9にしたら、hoverファンクション自体動いてないみたいでした。1で指定したところ、問題なく動作。

【参考】
■文字色や背景色をじんわり変える「Jquery Color Plugin」
http://otani-webs.com/lab/javascript/101120.html

[追伸メモ]
あとで調べること
・Jqueryのバージョン管理をどうするか。
・プラグインのライセンスについて