Question

我正在尝试创建一个框，只需单击向上或向下箭头即可在项目列表中向上和向下滚动，但我点击向上或向下箭头的速度越快，速度就会越来越慢滚动动画我已经读过一些关于它被递归调用的东西，我认为这会增加滚动效果的响应性。我希望有人可以看看我的jquery并给我一些提高性能的技巧。

 $(window).load(function () {
        $("#ScrollUp_Wrapper").mouseenter(function () {
            $("#ScrollUp_Button").fadeIn("fast", function () {
                $(this).css("filter", "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#E5E5E5')"),
                $(this).css("background", "-webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#E5E5E5))"),
                $(this).css("background", "-moz-linear-gradient(top,  #F2F2F2 , #E5E5E5)")
                $("#ScrollUp_Button").mouseup(function () {
                    $("#AllPost_leftcol").animate({ scrollTop: $("#AllPost_leftcol").scrollTop() - 200 }, 500);
                        });
                });
            }).mouseleave(function () {$("#ScrollUp_Button").fadeOut("fast");});


        $("#ScrollDown_Wrapper").mouseenter(function () {
            $("#ScrollDown_Button").fadeIn("fast", function () {
                    $(this).css("filter", "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#E5E5E5')"),
                    $(this).css("background", "-webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#E5E5E5))"),
                    $(this).css("background", "-moz-linear-gradient(top,  #F2F2F2 , #E5E5E5)")
                    $("#ScrollDown_Button").mouseup(function () {
                        $("#AllPost_leftcol").animate({ scrollTop: $("#AllPost_leftcol").scrollTop() + 200 }, 500);
                    });
                   });
            }).mouseleave(function () {$("#ScrollDown_Button").fadeOut("fast");
        });

        });

Answer 1

使用此：

$("#ScrollUp_Button").off('mouseup').mouseup(function () {...}

向下滚动按钮也一样。

在原始代码中，每次鼠标输入包装器时，您都会处理相应按钮的新点击事件。

Answer 2

尝试在排队每个下一个动画步骤之前调用$.stop()：

$("#ScrollUp_Button").stop(true, true).fadeIn("fast", function () {
...
$("#AllPost_leftcol").stop(true, true).animate({ scrollTop: $("#AllPost_leftcol").scrollTop() - 200 }, 500);
...
$("#ScrollUp_Button").stop(true, true).fadeOut("fast");
...

Jquery滚动效果随着点击次数的增加而减慢

2 个答案: