0

我编写了一个程序来为 div 内容设置动画。这是根据鼠标位置工作的。在mousemove事件中，如果鼠标位置超过窗口高度的 1/3，内容将向上动画（内容将出现）。否则它将动画到下行（消失）。该程序正在给出正确的结果，但它需要时间。我认为动画函数多次调用。

如何改进代码？

请检查代码：

<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，如果你想要一点延迟，你可以通过 animate 调用来做到这一点。但是在每个像素移动时启动 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/来消除您的事件。没有必要对每一个像素移动进行计算，如果你只是每 25 毫秒检查一次，它对用户来说看起来是一样的，但性能要高得多。

如果您包含链接中的 debounce 脚本，您可以像这样使用它：

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