javascript - JQuery: ホバー時のテキストの色の切り替え

Question

おそらく単純なもので、divの上にカーソルを置いたときにテキストの色をアニメーション化しようとしているだけです。これまでSOについて調査してきましたが、誰かが私を正しい方向に向けることができれば、それは素晴らしいことです. 現在、これは何もせず、コンソールにエラーをスローしません:

$('#homenav .homenavimg').hover(function (){
    $('#homenav h1').toggle(function() {
       $(this).animate({ color: "#FF0000" }, 1000);
    }, function() {
       $(this).animate({ color: "#000000" }, 1000);
    });
});

前もって感謝します！(PS: JQuery と UI のセットアップへのリンクがあります)

Answer 1

マークアップを提供していたとしたら、それは素晴らしいことでしたが、これをチェックしてください。おそらくあなたはこのようなものを探しています

http://jsfiddle.net/j6AeZ/2/

$('#homenav .homenavimg').hover(function (){
$('#homenav h1').stop().animate({ color: "#FF0000" }, 1000);
  }, function() {
  $('#homenav h1').stop().animate({ color: "#000000" }, 1000);
});​

Answer 2

$('#homenav .homenavimg').hover(function (){
    $('#homenav h1').stop().animate({ color: "#FF0000" }, 1000);
 }, function() {
    $('#homenav h1').stop().animate({ color: "#000000" }, 1000);
});

を使用する必要はありません.toggle()。とにかく、以前は間違って使用していました。

JSfiddle: http://jsfiddle.net/uArDu/2/

Answer 3

これをナビゲーション スタイルの効果 (つまり、複数の h1 で動作する) に変換することに関心がある場合は、次の手順を実行します。

$('#homenav .homenavimg').hover(function (){
$(this).find('h1').stop().animate({ color: "#53799E" }, 250);
 }, function() {
  $(this).find('h1').stop().animate({ color: "#F58426" }, 250);
});