淡入淡出鼠標懸停菜單元素

當用戶將鼠標懸停在無序列表菜單上時，我嘗試使用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/ – 2012-04-25 05:41:01

試試這個腳本：

$(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

真棒，非常感謝！ – 2012-04-25 06:00:28

Upvoted爲小提琴上的版本 - 這個人錯過了stop（）調用。 – kayen 2012-04-25 06:02:10

嘗試使用這個腳本：

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（）和效果基本show（）。請參閱此鏈接： http://jsfiddle.net/scQ9W/2/

應用一些CSS後： http://jsfiddle.net/scQ9W/3/

來源

2012-04-25 05:43:05 Chinmaya003

+1這也適用，只需要刪除顯示/隱藏線 – 2012-04-25 06:01:04

跳過$（「＃的SubItem1/subItem2」）鼠標離開和使用...

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

代替？

來源

2012-04-25 05:46:32 Simon

淡入淡出鼠標懸停菜單元素

回答

相關問題