动画文本Jquery在IE 8和IE 9上失败

时间:2013-12-26 08:07:11

标签: jquery html css internet-explorer-8 jquery-animate

我在IE 8上遇到奇怪的问题,其中动画文本无法在IE 8和IE 9上运行。以下是出现此问题的网站示例。

Click Here to see the SIte

我已经在Mozila Firefox,谷歌Chrome,Apple Safari,Opera和IE 10,IE 11上测试过,除了在IE 8和IE 9上找不到任何东西我发现javascript正在崩溃。我能更好地解决jquery的问题,也没有找到像这个动画文本一样的jquery。

以下是该页面的代码示例。

HTML

<table width="896" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>
    <td height="3" colspan="2"></td>
  </tr>

  <tr>
    <td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="images/logo.png" width="220" height="115" /></td>
        <td valign="bottom">
        <ul id="dropdown">
                <li><a href="home.html">Home</a></li>
                <li><a href="#">About Us</a>
                <ul>
                        <li><a href="profile.html">Company Profile</a></li>
                        <li><a href="founders.html">Founders</a></li>
                        <li><a href="board.html">Board of Directors</a></li>
                        <li><a href="investors.html">investors</a></li>
                        <li><a href="quaterly.html">Quaterly Result </a></li>
                        <li><a href="share.html">Distribution of Shareholding</a></li>
                        <li><a href="corporate.html">Corporate Governance</a></li>
                        <li><a href="report.html">Annual Report</a></li>
                        <li><a href="code.html">Code of Conduct</a></li>
                  </ul>
              <li><a href="#">Products</a>
                    <ul>
                        <li><a href="calcined.html">Calcined Petroleum Coke</a></li>
                        <li><a href="electrode.html">Electrode Carbon Paste</a></li>
                        <li><a href="tamping.html">Tamping Paste</a></li>
                    </ul>
              </li>
                <li><a href="social.html">Social Responsibility</a></li>
                <li><a href="#">Contact Us</a>
                <ul>
                        <li><a href="contactinf.html">Contact Information</a></li>
                        <li><a href="careers.html">Careers</a></li>
                        <li><a href="queries.html">Queries</a></li>
                  </ul>
            </ul>       </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="4" colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2">
    <div>
        <div class="banner rounded-btm">        
            <li><img src="images/1.jpg" alt="" /></li>
            <li><img src="images/2.jpg" alt="" /></li>
            <li><img src="images/3.jpg" alt="" /></li>
            <li><img src="images/4.jpg" alt="" /></li>
            <li><img src="images/5.jpg" alt="" /></li>
            <li><img src="images/6.jpg" alt="" /></li>     
        </div>
        <div id="text-scroll" class="tlt">India's Leading Producer of Calcinated Petroleum Coke</div>
    </div>
</td>
  </tr>
  <tr>
    <td height="10" colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2" class="headerbelow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to India Carbon Limited<br />
    <br /></td>
  </tr>
  <tr>
    <td><table width="648" border="0">
      <tr>
        <td width="5%">&nbsp;</td>
        <td width="84%" class="bodytxt"><p><strong>INDIA CARBON LIMITED (ICL)</strong>, India’s leading producer of Calcined Petroleum Coke, provides the right blend of people & products to serve the needs of the Aluminum, Steel, & other Carbon consuming industries.

</p>
          <p><strong>Calcined Petroleum Coke (CPC)</strong> is used extensively as Anode in Alumina Smelters, as Soderberg's Electrode for Ferroalloy Industries, and in the manufacturing of Graphite/ Graphite Electrodes, and Thermal Paste for Ferro Alloys & allied industries in Submerged Arc Furnaces.            </p>
          <p><strong>CPC</strong> is also used in various Steel Industries for - Melting of Steel , Recurburisation and for making Special Steels & Alloys. </p>
          </td>
        <td width="11%">&nbsp;</td>
      </tr>
    </table>    </td>
    <td width="235" rowspan="3" valign="top" class="rightmenu">
    <ul id="example" class="tlt">
        <li>Pride</li>
        <li>Passion</li>
        <li>Belief</li>
        <li>Creativity</li>
        <li>Integrity</li>
        <li>Team Work</li>
        <li>Ownership</li>
        <li>Winning</li>
    </ul>
    <p>&nbsp;</p>
    <div align="center" class="rightheader"><a href="core.html" target="_blank" class="pageheader style1">Click Here</a> </div></td>
  </tr>

  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="footer"><div align="center">Copyright &copy; 2012 India Carbon Ltd | All rights reserved<br />
    developed &amp; maintained by RightClik</div></td>
  </tr>
</table>

的JavaScript

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>   
<script type="text/javascript" src="js/juizDropDownMenu-1.5.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script src="js/responsiveslides.js"></script>
<script src="js/animateText.js"></script>
<script type="text/javascript">
$(function () {
    $('.tlt').textillate({   
      loop: true,   
      minDisplayTime: 2000,   
      initialDelay: 2,   
      autoStart: true,    
      inEffects: ['flipInX'],    
      outEffects: [ 'fadeOut' ],    
      in: {     
        effect: 'flipInX',      
        delayScale: 1.5,        
        delay: 50,  
        sync: false,        
        shuffle: false
      },
      out: {
        effect: 'fadeOut',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
      }
    });

    $('#example').textillate({   
      loop: true,   
      minDisplayTime: 3000,   
      initialDelay: 1,   
      autoStart: true,    
      inEffects: ['fadeInLeft'],     
      outEffects: [ 'rollOut' ],    
      in: {     
        effect: 'fadeInLeft',       
        delayScale: 1.5,        
        delay: 50,  
        sync: false,        
        shuffle: false
      },
      out: {
        effect: 'rollOut',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
      }
    });


    $(".banner").responsiveSlides({speed: 2500});

    $("#dropdown").juizDropDownMenu({
                'showEffect' : 'fade',
                'hideEffect' : 'slide'
    });

});
</script>
<script type="text/javascript">
    var textObjects = [
        {
            offset: 0,
            duration: 3000,
            animation: 'leftToRight',
            positions: {
            start: {               
                'font-size': '20px',
                'font-weight': 600,
                color: '#000',

                }
            }
        },
        {
            offset: 2000,
            duration: 3000,
            animation: 'explode',
            positions: {
            start: {               
                'font-size': '20px',              
                color: '#000',

                }
            }

        },
        {
            offset: 3500,
            duration: 3000,
            animation: 'rightToLeft',
            positions: {
            start: {
                top:'25px',
                left:'-20px',
                'font-size': '30px',
                'font-weight': 600,
                color: '#000',

                }
            }
        }

    ],
    options = {
        repeat: true
    },
    animations = {
        topToBottom: {
            positions: {
                start: {
                    bottom: '50%',
                    left: '0%',
                },
                1:  {
                    bottom: '60%'
                }
            }
        }
    };
    $("#example").animateText(textObjects, options, animations);
</script>

我在JS <script src="js/jquery.textillate.js"></script>中收到错误它在IE 8上显示错误并将所有其他jquery与自身崩溃,因此整个网站都搞砸了设计和其他一切。我对它非常困惑而且无法想象该怎么做。任何人都可以指导我这件事。或者帮我找到支持IE 8和IE 9的Jquery,还包括所有其他浏览器。

很抱歉,我无法发布代码并在JSFiddle上显示现场演示,因此我提供了上面显示的网站的完整网址。

0 个答案:

没有答案