JQuery no funciona en IE8

Question

En primer lugar, se amable. Estás a punto de ser expuesto por algunos de los jquery más feos que hayas visto.

Esta es mi primera incursión en JavaScript/JQuery pasado usando complementos, por lo que ha sido una curva de aprendizaje empinada para mí.

He creado una animación de apertura (por insistencia del cliente) que usa jquery para animar y fundir algunos divs.

La secuencia de comandos funciona bien en Chrome, Firefox y safari, pero no funciona en IE8 ... los divs simplemente pasan muy perezosamente.

Esto es lo que he hecho hasta ahora en mi investigación, sin alegría:

1. última jQuery (1.5)
2. guión envuelto en $ (document) ready (function() {.. .
3. type = text/javascript

además, también estoy utilizando algún otro Javascript (una presentación de diapositivas y un reproductor de medios) que funcionan bien en IE8.

Cualquier idea sobre cómo hacer funcionar este script en IE sería muy apreciada.

Además, no dude en ofrecer sugerencias sobre cómo limpiar este código hacky ... como digo, es feo.

Sobre el código:

guión, que se encuentra en el encabezado del documento

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

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

Gracias de antemano,

CB

Answer 1

Probablemente sus últimas secuelas en sus listas. No puedo verificarlo ahora, pero esa es mi apuesta.

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

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

Nota de la coma que falta en la lista animado. Las comas adicionales al final causan problemas en ie.

Answer 2

¿IE arroja algún error?

Tener una coma en la última propiedad de un objeto provocará que el IE se ahogue. Es un problema común.

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

    }); 

Otros navegadores funcionan bien, pero como regla general, nunca dejes una coma al final en tus objetos. Buen hábito para entrar.