求助优化js代码一段 ff和ie执行缓慢

请高人指点一下这段为什么只在opera和chrome上可以正常执行
ie和ff下卡到爆
同事用的猎豹下没完没了的上下反转...
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<style type="text/css">
*{
border:0px;
margin:0px;
padding:0px;
}
.wrap{
height:50px;
margin:100px 0 0 -200px;
overflow:hidden;
position:fixed;
left:50%;
width:400px;
}
.con{
font:13px/50px "Microsoft YaHei","微软雅黑",Arial;
height:100px;
width:400px;
position:absolute;
top:-50px;
left:0px;
}
.content{
background:#db3838;
color:#fff;
line-height:50px;
text-align:center;
}
.bg_bottom_con{
background:#0072bc;
}
.blank{
height:2000px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop() > 99) {
$(".con").animate({
top:"0px"
},150);
}else{
$(".con").animate({
top:"-50px"
},150);
}
});
</script>
</head><body>
<div class="wrap">
    <div class="con">
        <div class="content">大于100px</div>
        <div class="content bg_bottom_con">小于100px</div>
    </div>
</div>
<div class="blank"></div>
</body>
</html>

解决方案 »

  1.   

    我用IE10测试是没有问题的，不知道你用的是IE几
    还有你用的是JQ的最新版本，最新版本似乎对IE低版本的兼容性做了调整
    建议你把链接换成这个，再试一下
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      

  2.   

    设置一个动画状态,
    scroll这个事件,会多次触发,导致多次执行动画,加载一个机制使得动画队列过长导致.
      

  3.   

    每次滚动都执行animate肯定慢，跟浏览器无关，放弃animate吧，直接css top:0
      

  4.   

    确实是animate()的问题
    直接css或show()+hide()都正常
    多谢4/5楼的兄弟