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")下的<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

});

动画不透明度不起作用

3 个答案: