一个简单的 jQuery 脚本无法在 IE 中运行 - 认为 jQuery 是跨平台的！
谁能解释一下为什么下面的脚本在 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" alt="" /></a></div>
<div class="bwcover"><img src="DSCN3080bw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="relief2.jpg" alt="" /></a></div>
<div class="bwcover"><img src="relief2bw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="elegantbook.jpg" alt="" /></a></div>
<div class="bwcover"><img src="elegantbookbw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
<div class="bwcover"><img src="DSCN3080bw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
<div class="bwcover"><img src="DSCN3080bw.jpg" alt="" /></div>
</div>
</body>
我很惊讶，因为我认为 jQuery 的全部意义在于它是跨平台的，我们不应该担心 IE 的“怪癖”。
Could anyone explain why the following script does not work in IE 8. It is a very simple animation and works very nicely in FF.
I include CSS js and HTML as it appears on the test file.
<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" alt="" /></a></div>
<div class="bwcover"><img src="DSCN3080bw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="relief2.jpg" alt="" /></a></div>
<div class="bwcover"><img src="relief2bw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="elegantbook.jpg" alt="" /></a></div>
<div class="bwcover"><img src="elegantbookbw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
<div class="bwcover"><img src="DSCN3080bw.jpg" alt="" /></div>
</div>
<div class="linkholder">
<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
<div class="bwcover"><img src="DSCN3080bw.jpg" alt="" /></div>
</div>
</body>
I am surprised as I thought the whole point of jQuery is that it is cross platform and we shouldn't have to worry our sweet little heads about the "eccentricities" of IE.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
和
IE 不喜欢对象属性列表上的尾随逗号。
and
IE doesn't like trailing commas on object property lists.