jQuery muestra / oculta el elemento al pasar el mouse por otro elemento

Tengo el siguiente HTML como ejemplo:

<div id="header">
<div class="pagination"></div>
</div>

y el siguiente jQuery, que debería ocultar la paginación de forma predeterminada, pero luego se desvanece cuando un usuario desplaza el encabezado y luego se desvanece cuando se sale del encabezado:

            $(".pagination").hide();
            $("#header").mousemove(function()
            {
                $(".pagination").fadeIn(1500);
            });
            $("#header").mouseleave(function()
            {
                $(".pagination").fadeOut(1500);
            });

El problema que tengo es que se ejecutará a través del código la misma cantidad de veces que un usuario pasa el encabezado por lo que, por ejemplo, si me moví 5 veces seguidas, la paginación aparecería y desaparecería 5 veces. Esta no es la función que quiero, más bien un simple fundido de entrada y salida cuando un usuario está colocando el cursor sobre el encabezado.

¿Alguien puede ayudar? Gracias.

preguntado el 16 de mayo de 11 a las 17:05

Como acotación al margen, también puedes encadenarlos $("header").mousemove(...).mouseleave(...); -

+1: ¡la pregunta es legible y clara! :) -

2 Respuestas

bueno que en lugar de fadeIn - fadeOut Solo usa .fadeTo como en mi

DEMO de JSFiddle

Y para detener el problema del que habla, use .stop()

¡Buena suerte!

contestado el 16 de mayo de 11 a las 21:05

Eso funciona :) Parece que stop() era el código mágico que estaba buscando. Salud - Cameron

@Cameron no exactamente! use .stop () con fadeIn o fadeOut y obtendrá otro problema. prueba y verás! :) Cuídate. ..y gracias - Roko C. Buljan

Editado: se agregó código para evitar la aparición y desaparición repetida.

     var running = false;

     $("#header").hover(function()
        {
            if(!running){
               $(".pagination").fadeIn(1500);
               running = true;
            }
        }, function()
        {
            $(".pagination").fadeOut(1500, function(){
                running = false;
            });
        });

Ahora, el efecto de desplazamiento solo se activa si aún no se está ejecutando.

contestado el 17 de mayo de 11 a las 01:05

¡Sin embargo, todavía se desvanece la paginación en x número de veces! - Cameron

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.