JQuery Not Working in IE8
<p>Firstly, please be gentle. You are about to be exposed by some of the most ugly jquery you have ever seen.</p>

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

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

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

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

<ol>
<li>latest jquery (1.5)</li>
<li>script wrapped in $(document).ready(function() {...</li>
<li>type=text/javascript</li>
</ol>

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

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

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

<p>Onto the code:</p>

<p>script, located in the head of the document</p>

<pre><code>    &lt;script type="text/javascript"&gt;

$(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.
  });

  });

  &lt;/script&gt;
</code></pre>

<p>HTML:</p>

<pre><code>&lt;!-- animation --&gt;

&lt;div id="intro_container"&gt;&amp;nbsp;
&lt;div id="intro_white_div"&gt;&amp;nbsp;
&lt;div id="intro_finger_print"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id="intro_black_bar"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id="intro_unique_fitouts"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- end container --&gt;

&lt;!-- end animation --&gt;
</code></pre>

<p>CSS:</p>

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

<p>Thanks in advance,</p>

<p>CB</p>
