Escribí un programa para animar un contenido div. Esto funciona de acuerdo con la posición del mouse. En el evento mousemove, si la posición del mouse es más de 1/3 de la altura de la ventana, el contenido se animará hacia arriba (aparecerá el contenido). De lo contrario, se animará a la baja (desaparecerá). El programa está dando los resultados adecuados, pero está tomando tiempo. Creo que la función animada llama varias veces.

¿Cómo puedo mejorar el código?

Por favor revise el código:

<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>
0
Hearaman 3 may. 2012 a las 08:38
Si probó esto en jsfiddle, ¿el resultado es el mismo?
 – 
deex
3 may. 2012 a las 08:52
Lo comprobé con jsfiddle. No esta funcionando alli
 – 
Hearaman
3 may. 2012 a las 09:12

1 respuesta

La mejor respuesta

El problema es esta parte:

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

Básicamente, obtiene un evento en cada movimiento de píxel del mouse y crea un nuevo temporizador. Entonces, si el mouse se mueve 100 píxeles por la pantalla, está creando 100 nuevos temporizadores, 1000 píxeles y obtiene 1000 temporizadores.

No estoy seguro de que necesites usar setTimeout aquí, si quieres un poco de retraso, puedes hacerlo con la llamada animada. Pero aún tendrá problemas para iniciar una animación jQuery en cada movimiento de píxel. Debe agregar una marca de verificación para que solo esté haciendo la animación cuando sea necesario.

Algo como esto podría funcionar mejor:

$(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);
    }
}

También recomendaría mirar http://benalman.com/projects/jquery-throttle- debounce-plugin / para eliminar el rebote de sus eventos. No es necesario hacer el cálculo en cada movimiento de píxel, si solo lo verifica una vez cada 25 ms, el usuario verá el mismo pero será mucho más eficiente.

Si incluye el script antirrebote del enlace, puede usarlo como:

$(document).mousemove($debounce(25, animateElem));
2
Bill 3 may. 2012 a las 10:21