一个在 IE 中不起作用的简单 jQuery 脚本 - 认为 jQuery 是跨平台的！

Posted 2023-05-08

技术标签:

【中文标题】一个在 IE 中不起作用的简单 jQuery 脚本 - 认为 jQuery 是跨平台的！【英文标题】：A simple jQuery script not working in IE - thought jQuery was cross platform ! 【发布时间】：2011-08-18 07:39:43 【问题描述】：

谁能解释为什么下面的脚本在 IE 8 中不起作用。它是一个非常简单的动画，在 FF 中非常好用。我包含了测试文件中出现的 CSS js 和 html。

<style>
    .linkholder
        display:block;
        float:left;
        position:relative;
        margin:15px;
        overflow:hidden; 
    

    .linkholder img
        border:none;
        max-height:200px;
        max-width:150px;
    

    
    .bwcover
        position:absolute;
        left:0;
        top:0;
        display:none;
        

    .colorlink
        position:absolute;
        left:0;
        top:0;
    

</style>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function()
        jQuery(".linkholder").each(function(i)
            var wid = jQuery(this).find(".colorlink").outerWidth();
            jQuery(this).width(wid);
            var hei=jQuery(this).find(".colorlink").outerHeight();
            jQuery(this).height(hei);
        );
        jQuery(".colorlink").fadeTo("fast",0.05);
        jQuery(".bwcover").fadeTo("fast",.25);
        anibase = jQuery(".linkholder").length;                 
        function heartbeat()
            newanigo();     
            jQuery(".bwcover").eq(anigo)
                .animate(opacity:.45,,1200,"linear")
                .delay(300)
                .animate(opacity:.15,500,"linear")                    
                .animate(opacity:.25,350);
            jQuery(".colorlink").eq(anigo)
                .animate(opacity:.9,,1200,"linear")
                .animate(opacity:.05,,750,"linear");
            function newanigo() anigo = Math.floor(Math.random()*(anibase));
            var t=setTimeout(heartbeat,4000);
        ;
        heartbeat();
        jQuery(".linkholder").hover(
            function () 
                if(jQuery(this).find(".bwcover").is(":animated"))
                    jQuery(this).find(".bwcover").stop(true,true);
                ;
                jQuery(this).find(".colorlink").fadeTo("slow",1);
                jQuery(this).find(".bwcover" ).fadeOut("slow");
                , 
            function () 
                if(jQuery(this).find(".bwcover").is(":animated"))
                    jQuery(this).find(".bwcover").stop(true,true);
                ;
                jQuery(this).find(".bwcover").fadeTo("fast",.25);
                jQuery(this).find(".colorlink").fadeTo("slow",.05);                 
                
            );
    );
</script>

<body>
    <div class="linkholder">            
        <div class="colorlink"><a href="#"><img src="DSCN3080.JPG"  /></a></div>
        <div class="bwcover"><img  src="DSCN3080bw.jpg"  /></div>         
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="relief2.jpg"  /></a></div>
        <div class="bwcover"><img  src="relief2bw.jpg"  /></div>
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="elegantbook.jpg"  /></a></div>
        <div class="bwcover"><img  src="elegantbookbw.jpg"  /></div>
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="DSCN3080.JPG"  /></a></div>
        <div class="bwcover"><img  src="DSCN3080bw.jpg"  /></div>
    </div>
    <div class="linkholder">
        <div class="colorlink"><a href="#"><img src="DSCN3080.JPG"  /></a></div>
        <div class="bwcover"><img  src="DSCN3080bw.jpg"  /></div>
    </div>
</body>

我很惊讶，因为我认为 jQuery 的全部意义在于它是跨平台的，我们不必担心 IE 的“怪癖”。

【问题讨论】：

什么不起作用？你得到什么错误？你能把你的代码放在 jsfiddle 上，并描述你得到/想要的行为吗？ jsfiddle.net 【参考方案1】：