Jqueryマウスオーバーフェードイン/アウト（ベストプラクティス）

Question

質問の下にあるdiv内の記述テキストをフェードイン/アウトするために働くJqueryコードがあります。問題？解決策はそれほどエレガントではありません。ここに私が持っているものがあります：

$("#home").mouseover(function() { 
    $("#homeText").fadeIn("slow"); 
}); 
$("#homeText").mouseout(function() { 
    $("#homeText").fadeOut(); 
}); 

これを行うには良い方法があります、私はそれが何であるか分かりません。あなたがホバーを使用することができ

Answer 1

、最初の関数は、「オーバーホバー」に作用し、2番目は

を「アウトホバー」のドキュメントがここに置かれているに基づいて行動します：http://docs.jquery.com/Events/hover

$("#home").hover(function(){ 
    $("#homeText").fadeIn("slow"); 
}, 
function(){ 
    $("#homeText").fadeOut(); 
}); 

Answer 2

ジョン、素晴らしいアドバイス！私はより完全な解決策のために出発点として使用しました。基本的なホバリングだけでこれを行うと、1つのメニュー項目のホバーコールが残ってしまいます。多くの冗長コード。あなたが提案したものを使って、私はこれを思いつきました：

$('.topMenu').hover(function() 
     { 
     $('#_'+this.id).fadeIn("slow"); 
     }, 
     function() 
      { 
     $('#_'+this.id).fadeOut();  
      }); 
}); 

すべてのメニュー項目にはtopMenuクラスとIDが与えられています。表示する対応するdivは、メニュー項目と同じIDです。プレフィックスは_ です。例： ....

私たちについて

...

ありがとうございます！

Answer 3

3行はどうですか？

<script> 

    $(function() { 

     $('#home').hover(function() { 
      $('#homeText').fadeToggle("slow"); 
     }); 

    }); 


    </script> 

エレガントですか？

Answer 4

$(function() { 
    $('#home').hover(function() { 
     $('#homeText').fadeIn("slow"); 
    }); 
    $('#home').mouseout(function() { 
     $('#homeText').fadeOut("slow"); 
    }); 
});