无法使用 jQuery 淡出子菜单答案

【问题标题】：Can't fade out submenu, with jQuery无法使用 jQuery 淡出子菜单
【发布时间】：2013-05-15 17:42:43
【问题描述】：

这是我的第一个问题！当然，你会在这方面帮助我。

我正在处理这个水平菜单：

HTML：

<div id="menu">
  <ul>
    <li><a href="#">MENU 1</a>
      <ul>
        <li><a href="#">SUBMENU 1.1</a>
          <ul>
            <li><a href="#">SUBMENU 1.1.1</a></li>
          </ul></li>
        <li><a href="#">SUBMENU 1.2</a></li>
        <li><a href="#">SUBMENU 1.3</a></li>
      </ul></li>
    <li><a href="#">MENU 2</a>
      <ul>
        <li><a href="#">SUBMENU 2.1</a>
          <ul>
            <li><a href="#">SUBMENU 2.1.1</a></li>
          </ul></li>
      </ul></li>          
    <li><a href="#">MENU 3</a></li>         
  </ul>
</div>

CSS：

  body 
  {

    font-family: "calibri";
    margin:0;
    padding: 0;
  }

  #menu
  {
    width: 100%;
    min-width: 400px;
    height: 30px;
    background-color: #222;
  }

  #menu ul 
  { 
    line-height: 30px; 
  }

  #menu ul li 
  {
    list-style: none; 
    float: left; 
    position: relative; 
  }

  #menu ul li a 
  { 
    padding-left: 5px; 
    text-decoration: none; 
    width: 100px; 
    height: 30px; 
    color: white; 
    background-color: black; 
    display: block;
  }

  #menu ul a:hover 
  { 
    background-color: grey; 
  } 

  #menu li ul 
  { 
    display: none;
    position: absolute;
    left: 0px;
    top: 100%;
    padding-top: 3px;
    padding-left: 3px;
    line-height: 20px;
  }

  #menu li ul li a 
  {
    height: 20px;
    font-size: small; 
  }

  #menu li:hover > ul 
  { 
    display: block;
  }

  #menu li ul li a 
  {
    width: 150px;
  }

  #menu li ul li 
  { 
    padding-top: 1px;
  }

  #menu li ul li ul 
  {
    left: 100%; 
    top: 0;
  }

  #menu li:hover > a 
  {
    background-color: grey;
  }

查询：

$(function() {

  $('li > ul').animate({'opacity': 0});

  $('li').hover(function () {
    $(this).find('ul:first').stop().animate({'opacity': 1});
  },function() {
    $(this).find('ul:first').stop().animate({'opacity': 0});
  });

});

As you can see, the fade in effect (with opacity) is working when the option is hovered, but how can I make it fade out?我正在使用 IE9。

谢谢！

【问题讨论】：

标签： jquery css fadein fadeout submenu

【解决方案1】：

首先，我使用提供的代码创建了一个jsFiddle。正如你所看到的，它工作得很好，那是因为 jsFiddle 被设置为运行 Javascript onLoad。

因此，您需要做的是确保您的函数在 DOM 加载后运行，方法是将其包装在如下代码块中：

$(document).ready(function() {
  // Your JS function here

});

【讨论】：

它不起作用......你可以看到淡入淡出效果，但不是淡出效果。

【解决方案2】：

我假设您想在鼠标指针悬停在选项上时淡入该选项，并在您将鼠标指针从同一选项上移开时淡出。在您的问题中明确说明。但是由于您是 SO 新手，因此您不会被否决：P

基于此假设，您需要分别为 mousever 和 mouseout 事件编写代码。

$(document).ready(function() {

    $('li').mouseover(function(e){
        $(this).fadeIn(500);
    });

    $('li').mouseout(function(e){
        $(this).fadeOut(500);
    });

});

尝试从 jquery 主页了解 mouseover 和 mouseout 事件。

【讨论】：

【解决方案3】：

我已经找到了解决办法……

在 CSS 上，我有这样的评论：

/*#menu li:hover > ul { display: block;}*/

我也用这个替换了 jQuery：

$('#menu ul li').hover(function () { $(this).find('ul:first').stop().fadeToggle('fast');});

谢谢！

【讨论】：