JQuery在IE8中不起作用

时间:2011-02-15 20:52:50

标签: javascript jquery

首先,请温柔。你将要见到一些你见过的最丑陋的jquery。

这是我第一次使用插件进入Javascript / JQuery,所以对我来说这是一个陡峭的学习曲线。

我已经创建了一个开放动画(在客户端的坚持下),它使用jquery来动画和淡出几个div。

该脚本在chrome,firefox和safari中运行良好,但在IE8中不起作用... div只是非常懒惰地挂起。

这是我迄今为止在研究中所做的事情,没有任何乐趣:

  1. 最新的jquery(1.5)
  2. 脚本包含在$(document).ready(function(){...
  3. 类型=文本/ JavaScript的
  4. 另外,我还使用其他一些在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

2 个答案:

答案 0 :(得分:6)

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() {

    });

其他浏览器播放正常,但作为一般规则,永远不要在对象中留下尾随逗号。进入的好习惯。

答案 1 :(得分:3)

您的列表中可能是您​​的尾随逗号。现在无法检查,但这是我的赌注。

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

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

请注意动画列表中缺少的逗号。额外的尾随逗号导致问题,即。