Animate opacity not working

我有一個jQuery下拉菜單，當我使用fadeIn和fadeOut時很好，所以選擇器和HTML都很好。Animate opacity not working

但是，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>

來源

2011-09-06 dzilla

在IE瀏覽器中，你仍然會看起來醜陋的樣子。 – Loktar

好吧，隨着淡入在子菜單剛剛出現，並沒有逐漸淡化。我知道你可以在菜單中添加一個z-index，它會淡入，但我認爲清晰的字體會混淆。我曾經在IE中看到過動畫不透明的一兩次。 – dzilla

你的html是什麼？ – anothershrubery

-1

試試這個：

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 

});

來源

2011-09-06 14:10:52

發佈的代碼無法在Chrome中運行。沒有菜單出現，它只是不起作用。 – dzilla

@dzilla你可不可以發佈你的HTML代碼 –

@Tushar：請考慮緩存你的選擇器。你正在構建'this'的一個jQuery對象（'$（this）'，然後多次構建它的'ul'子元素（'.children（'ul'）''）的另一個jQuery對象。（this）.children（'ul'）; children.animate（{「opacity」：1}）; children.animate（{「filter」：「alpha（opacity = 50）」}）;'或者更好，合併你的'animate'調用合成爲一個單獨的文件 – Matt

如果Turshar的例子不工作，嘗試使用fadeTo，我認爲這適用於IE不透明問題。

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

和

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

來源

2011-09-06 14:14:00 altschuler

你知道$("#nav li")目標每<li><ul id="nav">下，因此包括所有子菜單？

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

看這裏的文件和一個例子：https://api.jquery.com/child-selector/。但是您也可以搜索「CSS選擇器」以獲取有關選擇文檔中元素的更多信息。

來源

2015-09-19 12:08:34 Yeti

Animate opacity not working

回答

相關問題