JQuery 在 IE8 中不起作用

Question

首先，请温柔一点。你即将被一些你见过的最丑陋的 jquery 暴露。

这是我过去使用插件首次涉足 Javascript/JQuery，因此对我来说这是一个陡峭的学习曲线。

我创建了一个打开动画（在客户的坚持下），它使用 jquery 动画和淡出一些 div。

该脚本在 chrome、firefox 和 safari 中运行良好，但在 IE8 中无法运行...... div 只是非常懒惰地闲逛。

这是我迄今为止在研究中所做的，没有任何乐趣：

1. 最新的 jquery (1.5)
2. 脚本包含在 $(document).ready(function() {...
3. type=text/javascript

另外，我还使用了一些在 IE8 中运行良好的其他 javascript（幻灯片和媒体播放器）。

任何关于如何让这个脚本在 IE 中工作的想法将不胜感激。

此外，请随时提供有关清理此 hacky 代码的任何建议...就像我说的那样，它很丑陋。

进入代码：

脚本，位于文档头部

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

提前致谢，

CB

Answer 1

IE 会抛出任何错误吗？

在对象的最后一个属性上使用逗号会导致 IE 阻塞。这是一个常见问题。

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

    });

其他浏览器运行良好，但作为一般规则，永远不要在您的对象中留下逗号。养成好习惯。

Answer 2

您的列表中可能有您的尾随逗号。现在不能检查，但那是我的赌注。

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

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

注意动画列表中缺少的逗号。额外的尾随逗号会导致 ie 出现问题。