JQuery不能在IE8中工作

Question

首先，請溫和。你即將被一些你見過的最醜陋的jquery暴露出來。

這是我第一次嘗試使用插件的Javascript/JQuery，所以對我來說這是一個陡峭的學習曲線。

我創建了一個使用jquery動畫和淡出幾個div的開場動畫（在客戶端的堅持）。

該腳本在Chrome，Firefox和Safari瀏覽器中正常工作，但在IE8中無法正常工作...... divs非常懶散地掛起。

下面是我在我的研究迄今所做的，沒有快樂：

1. 最新的jQuery（1.5）
2. 腳本包在$（文件）。就緒（函數（）{.. 。
3. 類型=文本/ JavaScript的

另外，我還使用了一些其他的JavaScript（幻燈片和媒體播放器），在IE8正常工作。

關於如何讓這個腳本在IE中工作的任何想法將不勝感激。

另外，請隨時提供清理這個hacky代碼的任何建議......就像我說的，這很醜陋。

走上代碼：

腳本，位於文檔的頭部

<script type="text/javascript"> 

$(document).ready(function(){ 


$('#intro_finger_print') 
    .fadeOut(6500, function() { 
      }); 

    $('#intro_black_bar').animate({ 
    width: '+=1000', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    width: '+=0', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    marginTop: '-=83', 
    }, 1000, function() { 
    // Animation complete. 
    }); 


$('#intro_unique_fitouts').animate({ 
    marginLeft: '-=1773', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

$('#intro_unique_fitouts').animate({ 
    width: '+=0', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_unique_fitouts').animate({ 
    marginTop: '-=83', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_unique_fitouts').animate({ 
    marginLeft: '=0', 
    }, 2000, function() { 
    // Animation complete. 
    }); 

    $('#intro_unique_fitouts').animate({ 
    marginLeft: '-=683', 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    marginLeft: '+=0', 
    }, 2000, function() { 
    // Animation complete. 
    }); 

    $('#intro_black_bar').animate({ 
    marginLeft: '+=1683', 
    }, 1000, function() { 
    // Animation complete. 
    }); 


    $('#intro_container') 
    .animate({ 
    opacity: 1, 
    }, 6500, function() { 
    // Animation complete. 
    }); 

    $('#intro_container') 
    .animate({ 
    opacity: 0, 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    }); 

    </script> 

HTML：

​​

CSS：

/* ANIMATION */ 

#intro_container {background-color:white; min-width:100%; min-height:100%; display:block; padding:0; margin:0 auto; position:fixed; left:0%; top:0%; z-index:1000;} 

#intro_white_div {width:100%; background-color:white; margin:-20px 0 auto; display:block; min-height:900px; position:absolute; left:0%; margin-left:0px; overflow:hidden; background-image:url(../images/container_bg.jpg); background-repeat:repeat-x; margin-top:-15px;} 

#intro_black_bar {width:0px; height:55px; display:block; background-color:none; background-image:url(../images/intro_black_strip.png); background-repeat:no-repeat; position:absolute; top:150px; left:50%; margin-left:-495px; z-index:1200;} 

#intro_unique_fitouts {width:500px; float:right; background-image:url(../images/Unique_Fitouts_intro.png); background-repeat:no-repeat; z-index:1500; height:50px; background-color:none; margin-top:138px; margin-left:2097px; position:absolute;} 

#intro_finger_print {height:580px; position:absolute; width:960px; left:50%; margin-left:-480px; background-image:url(../images/ThumbA4Black.png);background-position:bottom left; background-repeat:no-repeat;} 

在此先感謝，

CB

Answer 1

可能是您的拖尾逗號在您的列表中。現在不能檢查，但那是我的賭注。

相反的： $('#intro_unique_fitouts').animate({ marginLeft: '-=1773', }, 1000, function() { // Animation complete. });

使用本$('#intro_unique_fitouts').animate({ marginLeft: '-=1773' }, 1000, function() { // Animation complete. });

注意在動畫列表中缺少的逗號。額外的尾隨逗號引起ie中的問題。

Answer 2

IE會拋出任何錯誤嗎？

對象中最後一個屬性的逗號會導致IE窒息。這是一個常見問題。

$('#intro_black_bar').animate({ 
     // marginLeft is the only property and is therefore the last one as well. 
     // Remove the comma after the last property 
     marginLeft: '+=1683', 
    }, 1000, function() { 

    }); 

其他瀏覽器玩的很好，但作爲一般規則，不要在對象中留下尾隨逗號。好習慣進入。