JQuery not working in IE8

Question

First, be careful. You are about to run into some of the ugliest jquery you've ever seen.

This is my first javascript / jQuery foray past using plugins, so for me it was a steep learning curve.

I created an opening animation (at the client's insistence) that uses jquery to animate and reduce the number of divs.

The script works fine in chrome, firefox and safari, but doesn't work in IE8 ... divs just hang out very lazy.

Here is what I have done so far in my research, without joy:

• last jquery (1.5)
• script wrapped in $ (document) .ready (function () {...
• type = text / javascript

In addition, I also use other javascript (slide shows and media player), which work fine in IE8.

Any ideas on how to get this script working in IE would be greatly appreciated.

In addition, you can offer any suggestions for cleaning this hacked code ... for example, I say this is ugly.

To code:

script located at the beginning of the document

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

Thanks in advance,

NE

Answer 1

Does IE have any errors?

Having a comma of the last property in the object will cause IE shutter. This is a common 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() {

    });

Other browsers work just fine, but as a rule, they never leave a trailing comma in your objects. Good habit to join.

Answer 2

Probably your final comma in your listings. I can’t check right now, but this is my bet.

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

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

. , ..