javascript - JQuery Not Working in IE8

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:

latest jquery (1.5)
script wrapped in $(document).ready(function() {...
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 plete.
  });

   $('#intro_black_bar').animate({
    width: '+=0',
    }, 1000, function() {
    // Animation plete.
  });

   $('#intro_black_bar').animate({
    marginTop: '-=83',
    }, 1000, function() {
    // Animation plete.
  });


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

 $('#intro_unique_fitouts').animate({
    width: '+=0',
    }, 1000, function() {
    // Animation plete.
  });

   $('#intro_unique_fitouts').animate({
    marginTop: '-=83',
    }, 1000, function() {
    // Animation plete.
  });

   $('#intro_unique_fitouts').animate({
    marginLeft: '=0',
    }, 2000, function() {
    // Animation plete.
  });

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

   $('#intro_black_bar').animate({
    marginLeft: '+=0',
    }, 2000, function() {
    // Animation plete.
  });

   $('#intro_black_bar').animate({
    marginLeft: '+=1683',
    }, 1000, function() {
    // Animation plete.
  });


  $('#intro_container')
  .animate({
    opacity: 1,
    }, 6500, function() {
    // Animation plete.
  });

  $('#intro_container')
  .animate({
    opacity: 0,
    }, 1000, function() {
    // Animation plete.
  });

  });

  </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,

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:

latest jquery (1.5)
script wrapped in $(document).ready(function() {...
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 plete.
  });

   $('#intro_black_bar').animate({
    width: '+=0',
    }, 1000, function() {
    // Animation plete.
  });

   $('#intro_black_bar').animate({
    marginTop: '-=83',
    }, 1000, function() {
    // Animation plete.
  });


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

 $('#intro_unique_fitouts').animate({
    width: '+=0',
    }, 1000, function() {
    // Animation plete.
  });

   $('#intro_unique_fitouts').animate({
    marginTop: '-=83',
    }, 1000, function() {
    // Animation plete.
  });

   $('#intro_unique_fitouts').animate({
    marginLeft: '=0',
    }, 2000, function() {
    // Animation plete.
  });

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

   $('#intro_black_bar').animate({
    marginLeft: '+=0',
    }, 2000, function() {
    // Animation plete.
  });

   $('#intro_black_bar').animate({
    marginLeft: '+=1683',
    }, 1000, function() {
    // Animation plete.
  });


  $('#intro_container')
  .animate({
    opacity: 1,
    }, 6500, function() {
    // Animation plete.
  });

  $('#intro_container')
  .animate({
    opacity: 0,
    }, 1000, function() {
    // Animation plete.
  });

  });

  </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,

Share Improve this question asked Feb 15, 2011 at 20:52 Chris B 511 silver badge2 bronze badges

1 For a beginner, it is not far from bad ;) – Caspar Kleijne Commented Feb 15, 2011 at 20:58
You need to assign the correct answer to someone for their help! – James-Jesse Drinkard Commented Feb 7, 2013 at 17:22

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

Does IE throw any errors?

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

    $('#intro_black_bar').animate({
         // marginLeft is the only property and is therefore the last one as well.
         // Remove the ma after the last property
         marginLeft: '+=1683',
    }, 1000, function() {

    });

Other browsers play fine, but as a general rule, never leave a trailing ma in your objects. Good habit to get into.

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

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

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

Note the missing ma in the animate list. Extra trailing mas cause issues in ie.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JQuery Not Working in IE8 - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)