动画不透明度不起作用

Question

当我使用fadeIn和fadeOut时，我有一个jQuery下拉菜单可以正常工作，因此选择器和HTML都很好。

但是， fadeIn在IE中提供了一些难看的行为。 我使用在这里找到的模板代码将菜单更改为动画不透明度，而不是fadeIn 。 唯一的问题是它不起作用。 有什么提示吗？

$(document).ready(function() {

    $("#nav li").hover(
        function () {
        $(this).children("ul").animate({"opacity": 1});
        },function(){
        $(this).children("ul").animate({"opacity": 0});
    });//hover

});// document ready

的HTML

<input type="hidden" name="arav" /><ul id="nav"> 
<li> <a href="index2.html">Home</a> 
</li> 
<li> <a href="personnel.html">Who We Are</a> 
</li> 
<li> <a href="#">Facts</a> 
<ul> 
<li><a href="sci.html">Sci</a></li> 
<li><a href="tbi.html">Tbi</a></li> 
<li><a href="stroke.html">Str</a></li> 
</ul> 
</li> 
<li> <a href="">Education</a> 
<ul> 
<li><a href="healthed.html">Health Education</a></li> 
<li><a href="#">KARRN Materials</a> 
<ul> 
<li><a href="handouts.html">Handouts</a></li> 
<li><a href="presentations.html">Presentations</a></li> 
<li><a href="movies.html">Movies</a></li> 
</ul> 
</li> 

<li><a href="sciinfosheets.html">SCI Info Sheets</a></li> 
</ul> 
</li> 
<li> <a href="stroke.html">Resources</a> 
<ul> 
<li><a href="statelevel.html">State Level</a></li> 
<li><a href="nationallevel.html">National Level</a></li> 
<li><a href="resourcesbycoutny2.html">Community Level</a></li> 
</ul> 
</li> 

<li> <a href="research.html">Research</a></li> 

<li> <a href="contactus.html">Contact Us</a> 
</li> 
</ul>

Answer 1

如果Turshar的示例不起作用，请尝试使用fadeTo ，我认为这可以解决IE不透明度问题。

$(this).children("ul").fadeTo(500, 1);

和

$(this).children("ul").fadeTo(500, 0);

Answer 2

您知道$("#nav li")针对<ul id="nav">下的每个 <li> <ul id="nav"> ，因此包括所有子菜单吗？

您可能想要做的是： $("#nav > li") 。 在CSS中使用>可以告诉您只需要直接的孩子（因此不需要孩子的孩子等）。

在此处查找文档和示例： https : //api.jquery.com/child-selector/ 。 但是，您也可以搜索“ CSS选择器”，以获取有关选择文档中元素的更多信息。

Answer 3

尝试这个 ：

opacity不适用于IE，您需要更改以filter属性

$(document).ready(function() {

    $("#nav li").hover(
        function () {
        $(this).children("ul").animate({"opacity": 1});
        $(this).children("ul").animate({"filter":"alpha(opacity=50)"});
        },function(){
        $(this).children("ul").animate({"opacity": 0});
        $(this).children("ul").animate({"filter":"alpha(opacity=0)"});
    });//hover

});