JQuery Not Working in IE8

Question

Firstly, please be gentle. You are about to be exposed by some of the most ugly jquery you have ever seen.

This is my first foray into Javascript/JQuery past using plugins, so it's been a steep learning curve for me.

I've created an opening animation (on client's insistence) that uses jquery to animate and fade out a few divs.

The script works fine in chrome, firefox and safari, but does not work in IE8... the divs just hang out very lazily.

Here's what I've done so far in my research, with no joy:

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

Also, I'm also using some other javascript (a slideshow and a media player) that work fine in IE8.

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

Also, please feel free to offer any suggestions on cleaning up this hacky code... like I say, it's ugly.

Onto the code:

script, located in the head 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,

CB

Answer 1

Does IE throw any errors?

Having a comma on the last property in an object will cause IE to choke. It's a common issue.

    $('#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 play fine, but as a general rule, never leave a trailing comma in your objects. Good habit to get into.

Answer 2

Probably your trailing comma's in your lists. Can't check right now but thats my bet.

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

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

Note the missing comma in the animate list. Extra trailing commas cause issues in ie.