[英]JQuery Not Working in IE8
首先,請溫柔。 你將要見到一些你見過的最丑陋的jquery。
這是我第一次嘗試使用插件進入Javascript / JQuery,所以這對我來說是一個陡峭的學習曲線。
我已經創建了一個開放動畫(在客戶端的堅持下),它使用jquery來動畫和淡出幾個div。
該腳本在chrome,firefox和safari中運行良好,但在IE8中不起作用... div只是非常懶惰地掛起。
這是我迄今為止在研究中所做的事情,沒有任何樂趣:
此外,我還使用其他一些在IE8中運行良好的javascript(幻燈片和媒體播放器)。
關於如何讓這個腳本在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:
<!-- animation -->
<div id="intro_container">
<div id="intro_white_div">
<div id="intro_finger_print"> </div>
<div id="intro_black_bar"> </div>
<div id="intro_unique_fitouts"> </div>
</div>
</div><!-- end container -->
<!-- end animation -->
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
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() {
});
其他瀏覽器播放正常,但作為一般規則,永遠不要在對象中留下尾隨逗號。 進入的好習慣。
可能是你的列表中的尾隨逗號。 現在無法檢查,但這是我的賭注。
而不是: $('#intro_unique_fitouts').animate({ marginLeft: '-=1773', }, 1000, function() { // Animation complete. });
使用這個$('#intro_unique_fitouts').animate({ marginLeft: '-=1773' }, 1000, function() { // Animation complete. });
請注意動畫列表中缺少的逗號。 額外的尾隨逗號導致問題,即。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.