Javascript Jquery Internet Explorer兼容性（切换和动画）_Javascript_Jquery_Jquery Animate

Javascript Jquery Internet Explorer兼容性（切换和动画）

javascript jquery

Javascript Jquery Internet Explorer兼容性（切换和动画）,javascript,jquery,jquery-animate,Javascript,Jquery,Jquery Animate,为什么这一小段jQuery代码在InternetExplorer上不起作用？它在所有Webkit浏览器中都可以正常工作 $('#logo').toggle(function() { $('#about').animate({'top': '-400px'},'slow'); }, function() { $('#about').animate({'top': '0px'},'slow'); }); CSS: HTML 试验正如纳拉姆所说，任何高度低于400px的图像都将消

为什么这一小段jQuery代码在InternetExplorer上不起作用？它在所有Webkit浏览器中都可以正常工作

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

CSS:

HTML


试验

正如纳拉姆所说，任何高度低于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>


#标志{
保证金：-55px自动0自动；
光标：指针；
}
#关于{
宽度：100%；
高度：200px；
位置：固定；
顶部：0px；
z指数：3000；
}
试验
$（“#徽标”）。切换(
函数（）{
$（'#about'）。动画（{'top'：'-400px'}，'slow'）；
},
函数（）{
$（'#about'）。动画（{'top'：'0px'}，'slow'）；
});

出于某种原因，脚本必须低于它将影响的html。我注意到这在中是正确的，当我尝试将脚本放在标记上方的任何位置时，它们会影响它，但它不会起作用。有一些评论认为它对IE7不太有效，但在这个例子中，我的情况并非如此

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

正如Jack所说，最好将javascript放在它产生的HTML之后

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


$.ready（函数（）{
$（'#logo'）。切换（函数（）{
$（'#about'）。动画（{'top'：'-400px'}，'slow'）；
}，函数（）{
$（'#about'）。动画（{'top'：'0px'}，'slow'）；
}); 
});

html和css是如何设置的？那里没有任何标识为logo的东西…“删除了hashtags”-为什么？我已将标识logo2固定为logo，但仍然不起作用。我删除了hashtags，否则stackoverflow会使其成为标题。提供的html和css显示，除非图像大于

400px

，否则您将只能隐藏

div\about

，同时假设

\logo2

是

\logo

，这样它才能在需要放入javascript的html之上工作

$（document）.ready（函数（）{….}）
<!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>

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