爲什麼我的jQuery「fadeIn」不能在IE中工作？

所以，大家都知道IE並不像大多數其他瀏覽器類型那樣進步，這讓我非常頭疼。所以我完成了我需要模板化的網站項目，但這4個鏈接不會在Internet Explorer中打開代碼的「淡入」部分。爲什麼我的jQuery「fadeIn」不能在IE中工作？

誰能告訴我哪裏出錯了嗎？！ xoxoxoxoox

結構：

body 
{ 
    margin: 0; 
    padding: 0; 
    height:100%; 
    width:100%; 
    background-color: #FFF; 
    z-index:-1; 
} 
#content 
{ 
    width: 100%; 
    height: 640px; 
    background-color:#060; 
    z-index:20; 
    position:relative; 
} 
#content-inner 
{ 
    width: 960px; 
    height: 640px; 
    background-color:#666; 
    margin-left:auto; 
    margin-right:auto; 
    z-index:-1; 
    position:relative; 
} 

#hidebar 
{ 
    width: 100%; 
    height: 290px; 
    background-color:#000; 
    position:absolute; 
    z-index:2; 
    bottom:0; 
    left:0; 
    display:none; 
} 

#jqb1 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
    height:100%; 
    background-color:#F00; 
    display:none; 
} 
#jqb2 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
    height:100%; 
    background-color:#00F; 
    display:none; 
} 
#jqb3 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
    height:100%; 
    background-color:#9F3; 
    display:none; 
} 
#jqb4 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
    height:100%; 
    background-color:#360; 
    display:none; 
} 



#navbar 
{ 
    width: 100%; 
    height: 257px; 
    background-color:#F00; 
} 
#navbar-inner 
{ 
    width: 960px; 
    height: 257px; 
    background-color:#666; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 

#footer 
{ 
    width: 100%; 
    height: 181px; 
    background-image:url(images/gray-pixel.png); 
    position:relative; 
} 
#footer-inner 
{ 
    width: 960px; 
    height: 181px; 
    background-color:#666; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 
#footer-small 
{ 
    width:230px; 
    float:left; 
    height:100%; 
    background-color:#999; 
    position:relative; 
} 
#footer-large 
{ 
    width:500px; 
    float:left; 
    height:100%; 
    background-color:#CCC; 
    position:relative; 
} 
#colour-bar 
{ 
    width: 100%; 
    height: 13px; 
    background-color:#639; 
    position:relative; 
} 


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,  pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s,  samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,  fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,  aside, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output,  progress, section, summary, time { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 
ul { 
    list-style-type:none; 
} 
ul li a{ 
    font:700 49px/1.2em Arial, Helvetica, sans-serif; 
    color:#fff; 
    text-decoration:none; 
    height:59px; 
    display:inline-block; 
    list-style-type:none; 
    text-align:center; 
    position::relative; 
    vertical-align: baseline; 
} 

ul li a:hover{ 
    color:#e25709; 
} 
div.table 
{ 
    border: 0px solid black; 
    display: table; 
    margin-left:auto; 
    margin-right:auto; 
} 
div.tr {border: 0px solid black; display: table-row; } 
div.td {border: 0px solid black; display: table-cell; } 




h3 
{ 
    color:#FFF; 
    font-size:22px; 
    font-family:Arial, Helvetica, sans-serif; 
    padding-top:30px; 
    padding-left:25px; 
    padding-bottom:20px; 
} 

h4 
{ 
    color:#FFF; 
    font-size:13px; 
    font-style:normal; 
    font-family:Arial, Helvetica, sans-serif; 
    padding-left:25px; 
    padding-right:25px; 
    line-height:1.2em; 
}

索引頁：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link rel="stylesheet" type="text/css" href="css/structure.css"/> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 


<body> 
    <div id="content"> 
     <div id="hidebar"> 
      <div id="jqb1"></div> 
      <div id="jqb2"></div> 
      <div id="jqb3"></div> 
      <div id="jqb4"></div>  
     </div>  
     <div id="content-inner"> 
     <a href="index.html"> 
       <img src="images/logo.jpg"/ alt> 
      </a> 

     </div> 

    </div> 
    <div id="colour-bar"></div> 
    <div id="navbar"> 
     <div id="navbar-inner"> 
      <ul> 
       <li><a href="#" rel="1"><button1>About us</button1></a></li> 
       <li><a href="#" rel="2"><button2>Partners</button2></a></li> 
       <li><a href="#" rel="3"><button3>Solutions</button3></a></li> 
       <li><a href="#" rel="4"><button4>Services</button4></a></li> 
      </ul> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footer-inner"> 
      <div id="footer-small"></div> 
       <div id="footer-large"> 
        <div class="table"> 
         <div class="tr"> 
          <div class="td"> 
           <h3>Contact Us:</h3> 
          </div> 
          <div class="td"> 
          </div> 
         </div> 
         <div class="tr"> 
          <div class="td"> 
           <h4>AUS - Melbourne<br /> 
           101 Main Street<br /> 
           Glen Iris VIC 3146</h4> 
          </div> 
          <div class="td"> 
           <h4>Email: [email protected]<br /> 
           Phone: (03) 9888 8888<br /> 
           Fax: (03) 9888 8888</h4> 
          </div> 
         </div> 
        </div> 
       </div> 
      <div id="footer-small"></div> 
     </div> 
    </div> 

<script> 
$("button1").click(function() { 
$("#hidebar").fadeIn("slow"); 
$("button1").toggle(); 
$("button2").show(); 
$("button3").show(); 
$("button4").show(); 
$("#jqb1").show(); 
$("#jqb2").hide(); 
$("#jqb3").hide(); 
$("#jqb4").hide(); 
}); 

$("button2").click(function() { 
$("#hidebar").fadeIn("slow"); 
$("button2").toggle(); 
$("button1").show(); 
$("button3").show(); 
$("button4").show(); 
$("#jqb2").show(); 
$("#jqb1").hide(); 
$("#jqb3").hide(); 
$("#jqb4").hide(); 
}); 

$("button3").click(function() { 
$("#hidebar").fadeIn("slow"); 
$("button3").toggle(); 
$("button1").show(); 
$("button2").show(); 
$("button4").show(); 
$("#jqb3").show(); 
$("#jqb1").hide(); 
$("#jqb2").hide(); 
$("#jqb4").hide(); 
}); 

$("button4").click(function() { 
$("#hidebar").fadeIn("slow"); 
$("button4").toggle(); 
$("button1").show(); 
$("button2").show(); 
$("button3").show(); 
$("#jqb4").show(); 
$("#jqb1").hide(); 
$("#jqb2").hide(); 
$("#jqb3").hide(); 
}); 
</script> 

</body> 
</html>

來源

2013-02-02 Dan

IE的某些版本不支持透明度，這可能會導致您的問題... – Chad

Hmmmm。謝謝@Chad。你能推薦一個解決方法嗎？ – Dan

我相信你所面臨的問題是與IE瀏覽器不理解定製的元素，如<button1>

做

我他們改變爲標準<button>元件用標識：

<button id="button1">About us</button> 
<button id="button2">Partners</button> 
<button id="button3">Solutions</button> 
<button id="button4">Services</button>

反過來，我也改變了按鈕的處理程序以相應地觸發關閉元件ID的：

$("#button1").click(function() { 
    ... 
}); 

$("#button2").click(function() { 
    ... 
}); 

$("#button3").click(function() { 
    ... 
}); 

$("#button4").click(function() { 
    ... 
});

我移動您的代碼到一個在IE10中用文檔模式IE7-IE9進行提琴和測試。初始淡入淡出問題似乎已經解決。

jsfiddle

來源

2013-02-03 13:10:50

我認爲我愛你@Ruben Infante！你是一個傳奇人物，我剛剛實現了你的代碼，並且還刪除了按鈕的樣式; D You Champ – Dan

很高興幫助。如果解決了你的問題，你介意接受答案嗎？ –

Oopsies！我以爲我有:) – Dan

爲什麼我的jQuery「fadeIn」不能在IE中工作？

回答

相關問題