Problema con la animación jquery e Internet Explorer 8

Esta tarde trabajé muy duro tratando de entender las posiciones html y la animación jquery. Hice una página HTML de la siguiente manera:

     body { background-image: url(Cartoon_Landscape2.jpg); }   function moveDIV ( obj, x, y ) { var element = document.getElementById(obj); element.style.left=x; element.style.top=y; } var t; function anim1() { moveDIV("mariposa", screen.availWidth, screen.availHeight); $("#mariposa").animate({left: '-84', top: '-58'}, 10000); t=setTimeout("anim1()",22000); //moveDIV("mariposa2", '-84', screen.availHeight); //$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000); } function anim2() { moveDIV("mariposa2", '-84', screen.availHeight); $("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000); t=setTimeout("anim2()",22000); } function callfunctions() { moveDIV("mariposa2", '-84', screen.availHeight); anim1(); var b=setTimeout("anim2()",11000); }    

Entonces la página muestra una animación flash con movimiento diagonal desde la izquierda y desde la derecha de la pantalla.

¡Y fue perfecto para mí, y funciona bien en Firefox, Opera, Safari, Chome, pero no en Internet Explorer 8! ¿Qué puedo hacer para solucionar este problema? = (

PD si utilizo la posición absoluta en ambos DIV, la animación funciona en Internet Explorer pero se crean barras de desplazamiento innecesarias.

Gracias

Veo algunas cosas que pueden llevar a varios problemas en su código de ejemplo:

1. JavaScript

Antes que nada, apenas usas jQuery. Dado que ya está utilizando jQuery, es mejor que lo utilice en su totalidad y se ahorre muchos dolores de cabeza. Por ejemplo, en lugar de implementar su propia función moveDIV () puede usar:

 $("#id").css({left: 10, top: 10}); 

casi exactamente cómo usas .animate () en tu código. También puede usar offset () para eso dependiendo de lo que sea mejor para usted:

 $("#id").offset({left: 10, top: 10}); 

Lea sobre .offset() , .css() y .animate() en los documentos jQuery API .

Por cierto, en lugar de usar:

 setTimeout("anim1()",22000); 

es mejor usar:

 setTimeout(anim1, 22000); 

Hace lo mismo, pero es más eficiente.

2. CSS

Puede intentar experimentar con la position: absolute o position: relative donde tiene position: fixed .

3. HTML

No tiene doctype y el IE puede intentar renderizar su página en modo peculiar. Para usar el modo estándar, agregue un tipo de documento al comienzo de su HTML:

De hecho IE8 incluso puede usar el motor de renderización IE7 si cree que sería mejor para su sitio web. Si desea asegurarse de que siempre se procesa con el mejor motor de representación en IE, también debe agregar:

Además, cuando te asegures de que tu sitio web funcione en IE8, también puedes utilizar el complemento Google Chrome Frame si está disponible:

Con todo, el comienzo de su HTML debería verse algo como esto

      ... and the rest of your HTML 

Esas son solo las principales cosas que veo en su código que puede considerar cambiar. No sé si al hacerlo resuelve tu problema, pero incluso si no lo hace, puede liberarte de tener que lidiar con otros problemas más adelante.