jqueryを使用してホバー/マウスオーバーのdivをフェードインする方法は？

Question

divがdisplay:hiddenに設定されています。特定の要素（#navbar li a）が上に乗ったときに、このdivをdisplay:blockに設定します。ここに私のJavaScriptがあります。

$('document').ready(function(){ 
    $("#navbar li a").onmouseover(function{ 
     $("#navbar ul").css("display","block"); 
    }); 
}); 

私はこれをテストしてきたように$("#navbar li a")は、適切な要素をターゲットにしていることを知っています。私のJavaScriptコードに問題はありますか？

編集：これはプルダウンメニューです。 #navbar ulはネストされたリストです。

Answer 1

ない「onmouseover属性」

右syntaxsisはありませんがあります：

$("#navbar li a").on("mouseover", function(){ 
    $("#navbar ul").show() //Can use just show here 
}) 

Answer 2

はい、あなたのコードに問題がある、jQueryのonmouseoverイベントを持っていない、とあなたがしているもの一方、

$(document).ready(function(){ 
    $("#navbar li a").on('mouseenter', function(){ 
     $("#navbar ul").show(); 
    }); 
}); 

、あなたはおそらく行うことができます：おそらくを探しているのMouseMoveの継続的mouseover火災ようmouseenterイベントですこれは単なるCSSでですか？ （

：

Answer 3

使用.hover

$('document').ready(function(){ 
    $("#navbar li a").hover(function(){ 
     $("#navbar ul").css("display","block"); 
    }); 
}); 

あなたがフェードインをご希望の場合は、ちょうどここにCSSが唯一の方法だ.fadeIn

DEMO完全性については

$(function() { 
$('#div1').hover(function() { 
    $('#div2').fadeIn(); 
}, function() { 
    $('#div2').fadeOut(); 
}); 
}); 

使用FYIこれはこのメソッドを使用して、ちょうどそれがないときはホバーに消え、その後ホバーに表示され、作る、と言うあたりとしてそれを電子。）

DEMO

#div2 { 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: none; 
} 

#div1:hover ~ #div2 { 
    display: block;  
} 

Answer 4

すべての答えは、表示/非表示されています。あなたのコードも。 質問は、フェードインについてです。

使用.fadeIn() .fadeOutではなく、あなたがdiv要素が実際に不透明から、あなたは不透明で始めている100％にフェードする場合

http://api.jquery.com/fadeIn/

Answer 5

が80％と言う隠します（0.8として示されている）、100％にフェードする（1.0として示される）。 「不表示」を使用してdivを非表示にする必要があるので、divを非表示にする必要があるため、不透明なレベルを効果なしで設定してから、表示して100％にフェードします。

$("div.mydivclass").on("mouseenter", function() { 
    $(this).css("display", "none"); 
    $(this).fadeTo("fast", 0.8); 
    $(this).css("display", ""); 
    $(this).fadeTo("10", 1.0); 
});