-1

上矢印または下矢印をクリックしてアイテムのリストを上下にスクロールするボックスを作成しようとしていますが、上矢印または下矢印をクリックするほど速くなく、スクロールの応答性がますます遅くなりますアニメーション 再帰的に呼び出されることについて読んだことがあります。これにより、スクロール効果の応答性が向上すると思います。私の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");
        });

        });
4

2 に答える 2

0

次の各アニメーションステップをキューに入れる前に、 $。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");
...
于 2012-12-05T21:02:25.023 に答える
0

これを使って：

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

スクロールダウンボタンも同様です。

元のコードでは、マウスがラッパーに入るたびに、それぞれのボタンの新しいクリックイベントを処理しています。

于 2012-12-05T21:00:02.713 に答える