问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于jquery 动画 animate问题

头像
Shinnosuke
    24823962
    <!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>

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

    jquery
    阅读 3k
    2 个回答
    得票最新
    头像
    warpcgd
      5581716
      ✓ 已被采纳

      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;
            });
           
        }
    });
 });

      高级实现

      函数防抖与节流

      头像
      cc长空
        1.9k1924

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

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

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