/ / JQueryマウスオーバーフェードイン/フェードアウト(ベストプラクティス)-javascript、jquery

JQueryのマウスオーバーフェードイン/アウト(ベストプラクティス) - javascript、jquery

質問の下にあるdiv内の説明テキストをフェードイン/フェードアウトするためのJqueryコードを使用しました。問題はありますか?解決策はそれほどエレガントではありません。

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

私はこれを行うためのより良い方法があることを知っています、私はそれが何であるかわからないだけです。

回答:

回答№1の21

ホバーを使用できます。最初の機能は「ホバーオーバー」に作用し、2番目の機能は「ホバーアウト」に作用します

ドキュメントは次の場所にあります。 http://docs.jquery.com/Events/hover

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

回答№2の6

3行はどうですか?

<script>

$(function () {

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

});


</script>

十分にエレガント?


答え№3の2

ジョン、すばらしいアドバイス! 私はより完全な解決策の開始点として使用しました。基本的なホバーだけでこれを行うと、単一のメニュー項目のホバー呼び出しが残ります。多くの冗長なコード。あなたが提案したものを使用して、私はこれを思いつきました:

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

すべてのメニュー項目には、topMenuクラスとIDが与えられます。表示する対応するdivは、メニュー項目と同じIDであり、先頭に_が付いています 例: ....

私たちについてのもの!

...

ありがとう!


答え№4の2
$(function () {
$("#home").hover(function() {
$("#homeText").fadeIn("slow");
});
$("#home").mouseout(function() {
$("#homeText").fadeOut("slow");
});
});