如何淡入/淡出菜单时悬停在父母上的儿童

我试图获得一个基本的fadeIn儿童ul#access ul li:hover > ul悬停后，然后fadeOut徘徊。我有这样的代码，但它不工作：如何淡入/淡出菜单时悬停在父母上的儿童

jQuery(document).ready(function(){ 
    jQuery("#access ul li").hover(function() { 
      jQuery(this).children("ul").fadeIn(500); 
     }, function() { 
      jQuery(this).children("ul").fadeOut(500); 
    }); 
});

下面的代码工作样的，但越野车，因为我没有影响只是this孩子：

jQuery(document).ready(function(){ 
    jQuery("#access ul li").hover(function() { 
      jQuery(this).children("ul").fadeIn(500).animate({top: '-=10'}, 500, function() { }); 
     }, function() { 
      jQuery("#access ul li > ul").fadeOut(500).animate({top: '+=10'}, 500, function() { }); 
    }); 
});

没有人有任何想法为什么顶级版本不起作用？

这里的HTML：

<nav id="access" role="navigation"> 
    <div class="menu"><ul> 
     <li><a href="#" title="Home">Home</a></li> 
     <li><a href="#" title="Sample Page">Sample Page</a> 
      <ul class='children'> 
       <li><a href="#"; title="About Me">About Me</a></li> 
       <li><a href="#" title="Another Page">Another Page</a></li> 
      </ul> 
     </li> 
    </ul></div> 
</nav>

来源

2011-12-21 Sam

会有所帮助。 – Dutchie432 2011-12-21 18:32:03

这听起来很奇怪，这是对我工作的罚款：

http://jsfiddle.net/tAUw4/

<div id="access"> 
    <ul> 
     <li> 
      Foo 
      <ul> 
       <li>Foo - 1</li> 
       <li>Foo - 2</li> 
       <li>Foo - 3</li> 
      </ul> 
     </li> 
     <li> 
      Bar 
      <ul> 
       <li>Bar - 1</li> 
       <li>Bar - 2</li> 
       <li>Bar - 3</li> 
      </ul> 
     </li> 
     <li> 
      Baz 
      <ul> 
       <li>Baz - 1</li> 
       <li>Baz - 2</li> 
       <li>Baz - 3</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

$(function() { 
    $('#access li').hover(function() { 
     $(this).children('ul').fadeIn(); 
    }, function() { 
     $(this).children('ul').fadeOut(); 
    }); 
}); 

ul ul { 
    display: none; 
}

来源

2011-12-21 18:49:16 powerbuoy

看起来这几乎是我的，但它不适合我。另外，如果它有帮助，如果我用'animate（）'替换'fadeIn（）'，animate与'this'儿童一起工作。我很难过。 – Sam 2011-12-21 19:51:41

嗯..你可以创建一个复制你的问题的JSFiddle吗？ – powerbuoy 2011-12-22 02:41:15

没有任何HTML它只是将是猜测，但我相信问题是元素在覆盖悬停事件处理程序所附带的原始元素或其他类似物时被淡化。

也许这样的事情会工作：

$(function() { 
    $("#access ul li").mouseenter(function() { 
     $('ul', this).fadeIn(500); 
    }); 
    $("#access ul li > ul:visible").mouseleave(function() { 
     $(this).fadeOut(500); 

    }); 
});

如果某些#access ul li ul元素都默认为可见，你可以尝试存储从的mouseenter的this元素的变量或使用jQuery的数据，并使用在mouseleave函数来定位正确的元素。

最好的选择当然是将你的html和css结构化，使其以常规方式工作。包括HTML在内的

来源

2011-12-21 18:56:01 adeneo

如何淡入/淡出菜单时悬停在父母上的儿童

回答

相关问题