War*_*ace 3 html css jquery animation
我想在滚动达到150px时隐藏菜单
HTML:
<html>
<body style="height:2000px">
<div id="header">
</div>
</body>
</html>
CSS:
#header{height:200px; background:#000; position:fixed; top:0; width:100%;}
JS:
$(function(){
$(window).bind('scroll', function(){
if($(this).scrollTop() >= 150) {
$('#header').attr('data-open','open');
}
if($(this).scrollTop() >= 150 && $('#header').attr('data-open') == 'open'){
$("#header").animate({top:'-180px'},500, 'linear').attr('data-open','open');
}else{
$("#header").animate({top:'0'},500, 'linear').removeAttr('data-open');
}
});
});
演示:http://jsfiddle.net/egZ6H/1/
它看起来很有效,但当我回到顶部时,有时显示菜单的动画开始有点太晚,反之亦然.
是什么造成的？
您需要.stop()在每次动画调用之前调用,以确保它不会等到完成上一个动画才能启动此动画.
查看更新的jsFiddle.
代码是:
$(function(){
$(window).bind('scroll', function(){
if($(this).scrollTop() >= 150) {
$('#header').data('open','open');
}
if($(this).scrollTop() >= 150 && $('#header').data('open') == 'open'){
$("#header").stop().animate({top:'-180px'},500, 'linear').data('open','open');
}else{
$("#header").stop().animate({top:'0'},500, 'linear').data('open', null);
}
});
});?
| 归档时间： |
|
| 查看次数： |
694 次 |
| 最近记录： |