0

div コンテンツをアニメーション化するプログラムを作成しました。これは、マウスの位置に応じて機能しています。イベントmousemove時に、マウスの位置がウィンドウの高さの 1/3 を超えると、コンテンツが上向きにアニメーション化されます (コンテンツが表示されます)。そうしないと、下側にアニメーション化されます (消えます)。プログラムは適切な結果を出していますが、時間がかかります。animate 関数が複数回呼び出されていると思います。

コードを改善するにはどうすればよいですか?

コードを確認してください:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">            
            var ww;
            var wh;
            var moverHeight="150";
            var moveRespondPosition;

            $(document).ready(function()
            {
                ww=$(window).width();
                wh=$(window).height();

                $("#mover")
                .css("height",moverHeight)
                .css("bottom",-moverHeight);

                moveRespondPosition=wh-(wh/3);

                $(document).mousemove(function(e)
                {
                    var mousePosition=e.pageY;
                    if(mousePosition>moveRespondPosition)
                    {
                        setTimeout('animateElem(0)',100);

                    }
                    else
                    {                        
                        setTimeout('animateElem(-moverHeight)',100);
                    }
                }); 
            });

            function animateElem(value)
            {
                $("#mover").animate
                ({
                    "bottom":value
                });
            }

        </script>

        <style type="text/css">
            *
            {
                padding: 0px;
                margin: 0px;
            }
            body
            {
                overflow-y: hidden;
            }
            #wraper
            {
                width: 100%;
                height: 100%;
                position: relative;
            }

            #mover
            {
                width: 100%;                
                background-color: #192B44;
                position: absolute;                
            }
        </style>
    </head>
    <body>
        <div id="wraper">
            <div id="mover">
                Content
            </div>
        </div>
    </body>
</html>
4

1 に答える 1

2

問題はこの部分です：

$(document).mousemove(function(e)
{
    var mousePosition=e.pageY;
    if(mousePosition>moveRespondPosition)
    {
        setTimeout('animateElem(0)',100);
    }
    else
    {                        
        setTimeout('animateElem(-moverHeight)',100);
    }
});

基本的に、マウスのピクセル移動ごとにイベントを取得し、新しいタイマーを作成しています。したがって、マウスが画面上で 100 ピクセル移動すると、100 個の新しいタイマー、1000 ピクセルが作成され、1000 個のタイマーが作成されます。

ここで setTimeout をまったく使用する必要があるかどうかさえわかりません。少し遅延が必要な場合は、アニメーション呼び出しでそれを行うことができます。ただし、ピクセルが移動するたびに jQuery アニメーションを開始するには、まだ問題があります。必要なときにだけアニメーションを実行するように、チェックを追加する必要があります。

このようなものがうまくいくかもしれません：

$(document).mousemove(animateElem);

function animateElem(e)
{
    var mousePosition=e.pageY;
    var value = mousePosition>moveRespondPosition ? 0 : -moverHeight;

    if ($('#mover').css('bottom') !== value) {
        $('#mover').stop().animate({'bottom',value}, 100);
    }
}

また、 http://benalman.com/projects/jquery-throttle-debounce-plugin/を参照して、イベントをデバウンスすることをお勧めします。1 つのピクセルの動きごとに計算を行う必要はありません。25 ミリ秒ごとに 1 回チェックするだけで、ユーザーには同じように見えますが、はるかにパフォーマンスが向上します。

リンクからデバウンス スクリプトを含めると、次のように使用できます。

$(document).mousemove($debounce(25, animateElem));
于 2012-05-03T06:21:53.140 に答える