Question

我有一个span类，当用户向下滚动到160px时，应该使用animate（）显示; 它是第一次和第二次正常工作，之后animate（）显示非常缓慢。

我的代码是..

<!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title>tokka</title>
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
            <style>
                /*-------------- TopBar----------*/
                #topbar{
                    padding: 0px;
                    background-color: #2483A0;
                }
                #topbar .topextra{
                    background-color: #000000;
                    color: #ffffff;
                }

                #topbar .collection .logo_box{
                    min-width: 200px;
                    padding: 1px;
                }
                #topbar .collection .logo_box a{
                    display: inline-block;
                    margin-right: 5px;
                    color: #ffffff;
                }

            </style>
            <script language="javascript" src="../lib/jquery/jquery.js"></script>
            <script language="JavaScript" src="../lib/bootstrap/bootstrap.js"></script>

            <script language="JavaScript" src="../lib/angular/angular.js"></script>
            <script language="javascript">
                $(document).ready(function(){
                    $(function () {
                        $(window).scroll(function () {
                            if ($(this).scrollTop() > 160) {
                                $("#category_navbar").slideUp(function(){
                                    $(".topextra").slideUp();
                                    $("#showmenow").animate({'margin-left':"0px"});
                                });
                            } else {
                                $(".topextra").slideDown(function(){
                                    $("#category_navbar").fadeIn();
                                    $("#showmenow").animate({'margin-left':"-50px"});
                                });
                            }
                        });

                        // scroll body to 0px on click
                        /*$('#back-top a').click(function () {
                            $('body,html').animate({
                                scrollTop: 0
                            }, 600);
                            return false;
                        });*/
                    });
                });
            </script>
        </head>
        <body>
            <br><br><br><br>
            <div id="topbar" class="navbar navbar-default navbar-fixed-top topnavbar no-radius" role="navigation">
                <div class="container-fluid">
                    <div class="row topextra">
                        something
                    </div>
                    <div class="row collection">
                        <div class="col-md-2">
                            <div class="navbar-header">
                                <div class="logo_box pull-right">
                                    <span id="showmenow" style="margin-left:-50px;"><a href="#"><h4>title</h4></a></span>
                                    <a href="#"><img ng-src="..." style="height: 30px; width: 90px"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar navbar-inverse" id="category_navbar" style="width:100%;position: fixed;">
                this is me
            </div>

            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </body>
    </html>

Answer 1

似乎有两个问题。

只有在slideUp()或slideDown动画完成后才会调用您的动画代码。因此，最好将它带到oncomplete函数之外，以便无论之前的动画是否完成都会调用它。
每次调用$("#showmenow")时，您都会在$(window).scroll()上调用动画，即使它实际上没有进行任何更改。动画需要一定的时间，即使它没有做任何事情，因此等待之前的动画完成会导致延迟。我认为在判断是否需要动画时使用if语句会对此进行排序。

所以你的JS代码将成为：

$(document).ready(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 160) {
            if($("#showmenow").css('marginLeft')=="-50px"){
                //only run when animation is required
                $("#showmenow").animate({'margin-left':"0px"});
            }
            $("#category_navbar").slideUp(function(){
                //only runs after slideUp() has completed
                $(".topextra").slideUp();
            });
        } else {
            if($("#showmenow").css('marginLeft')=="0px"){
                //only run when animation is required
                $("#showmenow").animate({'margin-left':"-50px"});
            }
            $(".topextra").slideDown(function(){
                //only runs after slideDown() has completed
                $("#category_navbar").fadeIn();
            });
        }
    });
});

这是一个有效的JS小提琴：http://jsfiddle.net/5hU7b/1/

一种轻微的替代方法，您可以使用stop()（http://api.jquery.com/stop/）来停止以前的动画并清除队列，而不是使用if语句来检查动画是否应该运行。在这种情况下，您的代码将成为：

$(document).ready(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 160) {
            //stop previous animations and clear queue
            $("#showmenow").stop(true).animate({'margin-left':"0px"});
            $("#category_navbar").slideUp(function(){
                //only runs after slideUp() has completed
                $(".topextra").slideUp();
            });
        } else {
            //stop previous animations and clear queue
            $("#showmenow").stop(true).animate({'margin-left':"-50px"});
            $(".topextra").slideDown(function(){
                //only runs after slideDown() has completed
                $("#category_navbar").fadeIn();
            });
        }
    });
});

这是JS小提琴：http://jsfiddle.net/5hU7b/2/

当在scrollTop中使用时，jQuery animate（）在margin-left上无法正常工作

1 个答案: