JQuery IE8'de Çalışmıyor

Question

Öncelikle lütfen nazik olunuz. Gördüğünüz en çirkin jquery'den bazılarına maruz kalmak üzeresiniz.

Bu eklentileri kullanarak geçmiş JavaScript/JQuery içine benim ilk baskını, bu yüzden benim için dik bir öğrenme eğrisi oldu.

Ben animasyon ve farklı renklendirilmiş karartmak için jquery kullanan (müşterinin ısrarı üzerine) bir açılış animasyonu oluşturduk.

senaryo krom, ateş ve safari çalışıyor, ancak div'ler sadece çok tembel takılmak ... IE8 çalışmaz.

Burada hiçbir sevinçle, şimdiye kadar benim araştırma yaptık ne: $ (document) sarılı

1. son jquery (1.5)
2. komut .ready (function() {.. .
3. type = text/javascript Ayrıca

, ben de IE8 iyi çalışır diğer bazı javascript (bir slayt gösterisi ve bir medya oynatıcı) kullanıyorum.

Bu betiğin IE'de nasıl çalıştığına dair herhangi bir fikir çok takdir edilecektir. Diyorum gibi

Ayrıca, çirkin, ... Bu hacky kodu temizlemeye herhangi bir öneri sunmak için çekinmeyin. kod üstüne

: belgenin başlığında bulunan

senaryo,

<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">&nbsp; 
<div id="intro_white_div">&nbsp; 
<div id="intro_finger_print">&nbsp;</div> 
<div id="intro_black_bar">&nbsp;</div> 
<div id="intro_unique_fitouts">&nbsp;</div> 
</div> 
</div><!-- end container --> 

<!-- end animation --> 

CSS: önceden

/* 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;} 

sayesinde,

CB

Answer 1

Muhtemelen, takip eden virgülünüz listelerinizdedir. Şu anda kontrol edemem ama bu benim bahsettim. $('#intro_unique_fitouts').animate({ marginLeft: '-=1773', }, 1000, function() { // Animation complete. });

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

Not hareketlendirmek listesinde eksik virgül: Yerine

. Ekstra sondaki virgüller, örn.

Answer 2

IE herhangi bir hata atar mı?

Nesnede son özellik üzerinde virgül olması IE'nin boğulmasına neden olur. Bu yaygın bir sorun.

$('#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() { 

    }); 

Diğer tarayıcılar ince oynamak, ama genel bir kural olarak, sizin nesnelerde bir eğik virgül asla terk. Girmek için iyi bir alışkanlık.