JQuery IE8

Question

में काम नहीं कर रहा है सबसे पहले, कृपया नम्र रहें। आप कभी देखे गए कुछ सबसे बदसूरत jquery द्वारा उजागर होने जा रहे हैं।

यह प्लगइन का उपयोग कर जावास्क्रिप्ट/JQuery में मेरा पहला प्रयास है, इसलिए यह मेरे लिए एक सीधी सीखने की वक्र रहा है।

मैंने एक उद्घाटन एनीमेशन (क्लाइंट के आग्रह पर) बनाया है जो एनिमेट करने के लिए jquery का उपयोग करता है और कुछ divs को फीका करता है।

स्क्रिप्ट क्रोम, फ़ायरफ़ॉक्स और सफारी में ठीक काम करता है, लेकिन आईई 8 में काम नहीं करता है ... divs बस बहुत आलसी हो जाते हैं।

यहाँ है कि मैं क्या कोई खुशी के साथ अब तक अपना शोध में किया है, बताया गया है:

1. नवीनतम jQuery (1,5)
2. $ (दस्तावेज़) में लिपटे स्क्रिप्ट .ready (function() {.. ।
3. प्रकार = पाठ/जावास्क्रिप्ट

इसके अलावा, मैं भी कुछ अन्य जावास्क्रिप्ट (एक स्लाइड शो और एक मीडिया प्लेयर) कि IE8 में अच्छा काम उपयोग कर रहा हूँ।

आईई में काम कर रहे इस स्क्रिप्ट को कैसे प्राप्त किया जाए इस पर कोई विचार बहुत सराहना की जाएगी।

इसके अलावा, कृपया इस हैकी कोड को साफ करने के लिए कोई सुझाव देने के लिए स्वतंत्र महसूस करें ... जैसा कि मैंने कहा, यह बदसूरत है।

कोड रैंप:

स्क्रिप्ट, दस्तावेज़ के शीर्ष में स्थित

<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 --> 

सीएसएस:

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

अग्रिम धन्यवाद,

सीबी

Answer 1

शायद आपकी पिछली कॉमा आपकी सूचियों में है। अभी जांच नहीं कर सकता लेकिन यह मेरी शर्त है। $('#intro_unique_fitouts').animate({ marginLeft: '-=1773', }, 1000, function() { // Animation complete. });

उपयोग इस $('#intro_unique_fitouts').animate({ marginLeft: '-=1773' }, 1000, function() { // Animation complete. });

नोट चेतन सूची में लापता अल्पविराम:

बजाय

। अतिरिक्त पिछला कॉमा यानी मुद्दों का कारण बनता है।

Answer 2

क्या आईई कोई त्रुटि फेंकता है?

किसी ऑब्जेक्ट में अंतिम संपत्ति पर कॉमा होने से आईई को चकित कर दिया जाएगा। यह एक आम मुद्दा है।

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

    }); 

अन्य ब्राउज़र ठीक खेलते हैं, लेकिन एक सामान्य नियम के रूप में, कभी भी अपनी वस्तुओं में पिछली कॉमा नहीं छोड़ें। अंदर आने के लिए अच्छी आदत।