jQuery Internet Explorer兼容性（切换和设置动画）

Question

为什么这小段jQuery代码在Internet Explorer上不起作用？ IT在所有Webkit浏览器中都能正常工作。

$('#logo').toggle(function() {
    $('#about').animate({'top': '-400px'},'slow');
}, function() {
    $('#about').animate({'top': '0px'},'slow');
});

CSS：

#logo {
    margin:-55px auto 0 auto;
    cursor:pointer;
}

#about {
    width:100%;
    height:200px;
    position:fixed;
    top:0px;
    z-index: 3000;
}

的HTML

<div id="header">
  <div id="about">                  
    <p>test</p>
    <img id="logo2" src="assets/img/logokleinhover.png" alt="Logo" />
  </div>
</div>

Answer 1

如果将代码放在html页面底部的$（document）.ready（）中。 它减少了我在IE中使用js遇到的许多问题。

就像杰克所说，最好将JavaScript放在HTML效果之后。

<script>
$.ready(function(){ 
    $('#logo').toggle(function() {
        $('#about').animate({'top': '-400px'},'slow');
    }, function() {
        $('#about').animate({'top': '0px'},'slow');
    }); 
});
</script>

Answer 2

正如Nalum所说，任何高度小于400px的图像都会消失并且无法恢复。 但是这段代码对我来说适用于IE 7和IE 8：

<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style>
#logo {
    margin:-55px auto 0 auto;
    cursor:pointer;
}
#about {
    width:100%;
    height:200px;
    position:fixed;
    top:0px;
    z-index: 3000;
}
</style>
</head>
<body>
<div id="header">
  <div id="about">
    <p>test</p>
    <img id="logo" src="test.bmp" alt="Logo" />
  </div>
</div>
<script language='javascript'>
    $('#logo').toggle(
    function(){
        $('#about').animate({'top': '-400px'},'slow');
    },
    function(){
        $('#about').animate({'top': '0px'},'slow');
    });
</script></body></html>

出于某种原因需要注意的是，脚本必须位于会影响HTML的下方。 我在示例中注意到这是正确的，并且当我尝试将脚本放置在标签上方的任何位置时，它们将无法起作用。 有一些评论说它不适用于IE7，但在此示例中，对我而言并非如此。

jQuery Internet Explorer兼容性（切换和设置动画）

问题描述

2 个解决方案

解决方案1
2 2010-08-28 13:11:24

解决方案2
0 2010-08-26 17:44:44

jQuery Internet Explorer兼容性（切换和设置动画）

问题描述

2 个解决方案

解决方案1 2 2010-08-28 13:11:24

解决方案2 0 2010-08-26 17:44:44

解决方案1
2 2010-08-28 13:11:24

解决方案2
0 2010-08-26 17:44:44