JQuery funktioniert nicht im IE8

Question

Erstens, seien Sie bitte vorsichtig. Sie sind im Begriff, durch einige der hässlichsten Jquery Sie jemals gesehen haben ausgesetzt werden.

Dies ist mein erster Ausflug in Javascript/JQuery Vergangenheit mit Plugins, so dass es eine steile Lernkurve für mich gewesen.

Ich habe eine Eröffnungsanimation erstellt (auf Drängen des Kunden), die Jquery verwendet, um einige Divs zu animieren und auszublenden.

Das Skript funktioniert gut in Chrome, Firefox und Safari, aber nicht in IE8... die divs nur hängen sehr faul.

Hier ist, was ich bisher in meiner Forschung getan habe, ohne Erfolg:

1. neuestes Jquery (1.5)
2. script wrapped in $(document).ready(function() {...
3. type=text/javascript

Außerdem verwende ich noch einige andere Javascript-Funktionen (eine Diashow und einen Media Player), die im IE8 problemlos funktionieren.

Jede Idee, wie man dieses Skript im IE zum Laufen bringen kann, wäre sehr willkommen.

Auch, bitte fühlen sich frei, alle Vorschläge zur Bereinigung dieser hacky Code bieten ... wie ich sage, es ist hässlich.

Weiter zum Code:

Skript, das sich im Kopf des Dokuments befindet

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

Vielen Dank im Voraus,

CB

Answer 1

Gibt der IE irgendwelche Fehler aus?

Ein Komma in der letzten Eigenschaft eines Objekts führt dazu, dass der IE nicht mehr reagiert. Das ist ein häufiges Problem.

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

    });

Bei anderen Browsern ist das kein Problem, aber als allgemeine Regel gilt: Lassen Sie nie ein Komma am Ende Ihrer Objekte stehen. Eine gute Angewohnheit, die man sich angewöhnen sollte.

Answer 2

Wahrscheinlich sind die nachgestellten Kommas in Ihren Listen. Ich kann es gerade nicht überprüfen, aber das ist meine Wette.

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

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

Beachten Sie das fehlende Komma in der Animationsliste. Zusätzliche nachgestellte Kommas verursachen Probleme in IE.