JavaScript：不透明在歌劇中的作品，但不是IE

Question

我已經使用以下腳本的圖像，它似乎工作正常;但在Internet Explorer中，文本不會像應該那樣淡出。有任何想法嗎？

<td colspan="5" ID='links'> 
<ul id="navlist"> 
    <li id="active"><a href="#" id="a" onmouseover="over(this)" onmouseout="out()">Apie įmonę</a>|</li> 
    <li><a href="#" ID="b" onmouseover="over(this)" onmouseout="out()">Naujienos</a>|</li> 
    <li><a href="#" ID="c" onmouseover="over(this)" onmouseout="out()">Kainynai</a>|</li> 
    <li><a href="#" ID="d" onmouseover="over(this)" onmouseout="out()">Aktyvaus laisvalaikio priemonės</a>|</li> 
    <li><a href="#" ID="e" onmouseover="over(this)" onmouseout="out()">Servisas</a>|</li> 
    <li><a href="#" ID="f" onmouseover="over(this)" onmouseout="out()">Akcijos</a>|</li> 
    <li><a href="#" ID="g" onmouseover="over(this)" onmouseout="out()">Karjera</a>|</li> 
    <li><a href="#" ID="h" onmouseover="over(this)" onmouseout="out()">Galerija</a>|</li> 
    <li><a href="#" ID="i" onmouseover="over(this)" onmouseout="out()">Naudota technika</a></li> 
</ul> 
</td> 
<script> 
var ba = new Array("a","b","c","d","e","f","g","h","i"); 


function over(from){ 
var value = 5; 

for(i=0;i<ba.length;i++){ 

    if(from.id==ba[i]) 
    { 
     //do nothing 
    } 
    else{ 
     document.getElementById(ba[i]).style.MozOpacity = value/10; 
     document.getElementById(ba[i]).style.opacity = value/10; 
     document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')'; 

    } 
} 
} 
function out(){ 
var value = 10; 

for(i=0;i<ba.length;i++){ 

document.getElementById(ba[i]).style.MozOpacity = value/10; 
document.getElementById(ba[i]).style.opacity = value/10; 
document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')'; 
} 

} 
</script> 

謝謝！

Answer 1

我會建議創建一個類定義來設置元素的不透明度。然後，在你的JavaScript，你只需要編寫：

document.getElementById(ba[i]).className = "opacityClassName". 

在你的CSS，你opacityClassName樣式定義可以是這個樣子：

.opacityClassName { 
    filter: alpha(opacity:0.5); 
    KHTMLOpacity: 0.5; 
    MozOpacity: 0.5; 
    -khtml-opacity:.50; 
    -ms-filter:"alpha(opacity=50)"; 
    -moz-opacity:.50; 
    filter:alpha(opacity=50); 
    opacity:.50; 
} 

通過這種方式，你不必擔心的語法如：

document.getElementById(ba[i]).style.ms-filter 

無法正常工作。

Answer 2

檢查了這一點：http://www.quirksmode.org/css/opacity.html

最重要的部分：「IE8採用了新的註釋：-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";」

另外，IE瀏覽器（6,8）似乎認爲，該元素必須width明確設置，然後才能透明。奇怪的。上面的鏈接確實是用CSS設置寬度，但沒有提到這個奇怪的要求。

（雖然你沒有具體問一下，我建議使用jQuery這種類型的任務 - 它使這種效應更容易的工作，看到這裏例如：http://api.jquery.com/fadeTo/）

Answer 3

使用jQuery。我知道這是cliché的答案，但在這種情況下，它是現貨：它自動處理瀏覽器的怪癖。

觀察例如：

<table> 
<tr> 
<td colspan="5" ID='links'> 
<ul id="navlist"> 
    <li id="active"><a href="#" id="a">Apie įmonę</a>|</li> 
    <li><a href="#" ID="b">Naujienos</a>|</li> 
    <li><a href="#" ID="c">Kainynai</a>|</li> 
    <li><a href="#" ID="d">Aktyvaus laisvalaikio priemonės</a>|</li> 
    <li><a href="#" ID="e">Servisas</a>|</li> 
    <li><a href="#" ID="f">Akcijos</a>|</li> 
    <li><a href="#" ID="g">Karjera</a>|</li> 
    <li><a href="#" ID="h">Galerija</a>|</li> 
    <li><a href="#" ID="i">Naudota technika</a></li> 
</ul> 
</td> 
</tr> 
</table> 
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script><!-- load jQuery --> 
<script> 
// run when the document is loaded 
$(document).ready(function(){ 

    // give each link under #navlist opacity, unless cursor is over it 
    $('#navlist a').mouseover(function(){ 
     var current = this; 
      // run the following for each matching element 
     $('#navlist a').each(function(index,element){ 
      if (element != current) { 
       // handles browser quirks for us 
        $(element).css('opacity',0.5); 
      } 
     }); 
    }); 

    // remove the opacity 
    $('#navlist a').mouseout(function(event){ 
     $('#navlist a').each(function(index,element){ 
      $(element).css('opacity',1); 
     }); 
    }); 
}); 

</script> 

工程跨瀏覽器（歌劇，鉻，綠，火狐，IE6 和 IE8），用更少的代碼，能夠完成任務。花費的時間：15分鐘。