关于jquery 动画 animate问题

<!DOCTYPE html>
<html>
<head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .result{
        width: 100%;
        height: 50px;
        background: #ccc;
        position: fixed;
        top: -50px;
    }
    .result.active{
        top: 0;
    }
</style>

<script src="js/jquery-1.11.3.min.js"></script>

</head>


<body style="height:4500px;">

<div class="result"></div>


<script>

$(function(){
    var fs = true;
    $(window).scroll(function(event) {
        
        if( $(window).scrollTop() > 50 ){
            
            if(fs){
                
                $(".result").stop().animate({
                    top: 0
                },300);

                fs = false;
            }
        }
        else{

            $(".result").stop().animate({
                top: "-50px"
            },300);

            fs = true;
        }
    });
 });
</script>

</body>
</html>

实现效果:想实现滚动条位置大于指定值出现滚动横条。小于则隐藏。
出现问题:滚动到指定位置以后,动画很慢进入,小于指定值也会很慢收回。这是为什么?

回复
阅读 2.6k
2 个回答

scroll 的触发效率是很高的,一次滚动可能就触发了100次,你在写判断$(window).scrollTop()>50,未进行节流的控制,导致触发了多次的$(".result").animate(),建议在使用scroll(),尽量内部定义节流阀函数,提高性能.

简单的实现

$(function(){
    //fs的作用域需高于scroll内部
    var fs = true;
    $(window).scroll(function(event) {    
        if( $(window).scrollTop() > 50 ){ 
            if(fs){   
                $(".result").stop().animate({
                    top: 0
                },300,function(){
                  //animate里的回调函数
                  fs = false;
                });
               
            }
        }
        else{
            $(".result").stop().animate({
                top: "-50px"
            },300,function(){
                fs = true;
            });
           
        }
    });
 });

高级实现

函数防抖与节流

其实没太明白你的意思,随便整了整,就加了两stop,免得动画冲突了。

    $(window).scroll(function(event) {
    
        if( $(window).scrollTop() > 50 ){
 
            $(".result").stop().animate({
                top: 0
            },100);
        }
        else{

            $(".result").stop().animate({
                top: "-50px"
            },300);
        }
    });
 });
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏