87,917
社区成员
发帖
与我相关
我的任务
分享求助优化js代码一段 ff和ie执行缓慢
请高人指点一下这段为什么只在opera和chrome上可以正常执行
ie和ff下卡到爆
同事用的猎豹下没完没了的上下反转...
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>
...全文
请发表友善的回复…
发表回复
daemon_fish 2013-10-18
- 打赏
- 举报
每次滚动都执行animate肯定慢，跟浏览器无关，放弃animate吧，直接css top:0
快乐的2 2013-10-18
- 打赏
- 举报
比如滚动条在1,2,3,4,5,6,20,50,99时都触发了事件,就导致会执行多次动画.
做个变量存储动画结果判断下是否应该执行动画功能就OK了.
快乐的2 2013-10-18
- 打赏
- 举报
设置一个动画状态,
scroll这个事件,会多次触发,导致多次执行动画,加载一个机制使得动画队列过长导致.
魔术世界中文版 2013-10-18
- 打赏
- 举报
我用IE10测试是没有问题的，不知道你用的是IE几
还有你用的是JQ的最新版本，最新版本似乎对IE低版本的兼容性做了调整
建议你把链接换成这个，再试一下
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
tony4geek 2013-10-18
- 打赏
- 举报
改成id 选择器试试。
songlingxi 2013-10-18
- 打赏
- 举报
确实是animate()的问题
直接css或show()+hide()都正常
多谢4/5楼的兄弟
