マウスを動かすとメニュー要素がフェードアウトされます

jQueryを使用して順序付けられていないリストメニューの上にマウスを置くと滑らかなフェードイン/フェードアウトエフェクトを作成しようとしています。サブアイテムを含むメニュー項目の上にマウスを置くが、私はそれを隠すのに苦労している。マウスを動かすとメニュー要素がフェードアウトされます

必要条件は次のとおりです。 - マウスがサブメニューの項目を超えていない場合、または親がサブメニューのリストをフェードアウトする場合。私は私のメニューのスクリーンショットとHTMLマークアップを含めてだ

は、私が上記の要件ごとにメニューを非表示にすることができますどのように提案してください：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Home</title> 
    <link href="Styles/Style.css" rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     jQuery(document).ready(function() { 

      $('#subList').css("display", "none"); 

      $('#item3').mouseover(function() { 
       $('#subList').fadeIn('slow'); 
       $('#subList').css("display", "block"); 
      }); 

      $('#subItem1').mouseover(function() { 
       $('#subList').css("display", "block"); 
      }); 

      $('#subItem2').mouseover(function() { 
       $('#subList').css("display", "block"); 
      }); 

      $("#subItem1").mouseleave(function() { 
       $("#subList").fadeOut("slow"); 
      }); 

      $('#subItem2').mouseleave(function() { 
       $('#subList').fadeOut("slow"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="menu"> 
     <ul> 
      <li><a href="item4.htm">Menu Item 4</a></li> 
      <li><a href="#" id="item3">Menu Item3</a> 
       <ul id="subList"> 
        <li id="subItem1"><a href="subItem1.htm">Sub Item 1</a></li> 
        <li id="subItem2"><a href="subItem2.htm">Sub Item 2</a></li> 
       </ul> 
      </li> 
      <li><a href="item2.htm">Menu Item 2</a></li> 
      <li><a href="item1.htm">Menu Item 1</a></li> 
     </ul> 
    </div> 
</body> 
</html>

出典

2012-04-25 Denys Wessels

あなたのコードで何が間違っているのか詳しく調べることができます。私はあなたのコードをjsfiddleのリンクにコピーしています。http://jsfiddle.net/2yEtK/ –

をこのスクリプトを試してみてください。

$(function(){ 
    $(".menu ul li").hover(function(){ 
      $(this).children("ul").stop().fadeIn("slow"); 
     }, 
     function(){ 
      $(this).children("ul").stop().fadeOut("slow"); 
    }) 
})

http://jsfiddle.net/2yEtK/1/

出典

2012-04-25 05:42:53 Yorgo

大変ありがとうございます！ –

フィドルのバージョンアップアップ - これはstop（）コールがありません。 – kayen

このスクリプトを試してみてください：

jQuery(document).ready(function() { 

     $('#subList').css("display", "none"); 

     $('#item3').parent().hover(function() { 
      $('#subList').fadeIn('slow'); 
      $('#subList').show(); 
     }, 
      function(){ 
       $('#subList').fadeOut('slow'); 
       $('#subList').hide(); 
     } 
     ); 
    });

はここJSFiddleのリンクがあります： http://jsfiddle.net/scQ9W/1/

また、slideDown（）とslideUp（）を使用することができます。いくつかのCSSを適用した後 http://jsfiddle.net/scQ9W/2/

：このリンクを参照してください http://jsfiddle.net/scQ9W/3/

出典

2012-04-25 05:43:05 Chinmaya003

+1これも機能し、表示/非表示行を削除するだけでした –

スキップ$（ "＃subItem1/subItem2"）mouseleaveと使用...

$('#subList').mouseleave(function() { 
    $(this).fadeOut("slow"); 
});

代わりに。？

出典

2012-04-25 05:46:32 Simon

マウスを動かすとメニュー要素がフェードアウトされます

答えて

関連する問題