jQueryのhoverで文字色をふんわり変える効果をつけると、ページ読込完了後の最初のマウスホバーでふんわり変わらない件と代替方法

今までのウェブ制作で、jQueryのhoverを使って文字色をふんわり変える効果をつけていたところ、どうもページ読込完了後の最初のマウスホバーでふんわり変わらないことに気付いた。これはjQueryのhover内の始めのfunction（マウスホバー時の関数に当たる）でアニメーション時間を遅くした時に出くわしたもので、それ以後ひじょ〜に気になって仕方が無いのでその解消方法を探してみたら、CSS3を使えば良さそうだということがわかったので以下にチョットだけ解説を。

1. jQueryのhoverで文字色をふんわり変える

コードはいつもこんな感じのものを使っている。

$(function(){
 $("a").hover(
  function () {
   $(this).stop().animate({color: "任意の色A"}, 500);
  },
  function() {
   $(this).stop().animate({color: "任意の色B" }, 500);
  }
 );
});

jQueryのhoverは、対応ブラウザが多いのだが、ページ読込完了後の最初のマウスホバーではアニメーションが効かないようだ。この現象は、特に、CSSにもa:hoverを同時に指定している場合に起こる現象のようだ。

対応策としては、CSSのa:hoverでの指定はしないことで、アニメーションが効かない現象は解消されるが、これだとjQueryが読込めない時にa:hoverが出来なくなる、という欠点がある。

2. CSS3のtransitionで文字色をふんわり変える

通常のリンク色とマウスホバー時の色指定はこんな感じ。

a {color: 任意の色A;}
a:hover {color: 任意の色B;}

CSS3のtransitionの対応ブラウザは、IEがver10のみで、他のブラウザもベンダープレフィックスでの対応となっている。
しかし1.と違い、ページ読込み完了時の最初のマウスホバーでも効く。
なぜなら、CSSのa:hoverはそのままで、aに

a {
color: #000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
a:hover {color: Tomato;}

と赤字部分を追記すれば良いだけなので。
また、transitionに対応していないブラウザでも、1.と違ってa:hoverが出来なくなるということはない。

今後は、古いIEに対応する必要がない場合はCSS3を使うの方が良いかな。

---