Mouseover y mouseleave disparador cada vez que muevo el mouse dentro del elemento dado

Estoy creando un sitio donde coloca el mouse sobre una imagen y muestra un elemento (en este caso expandiendo su altura de 0 a 154 px).Mouseover y mouseleave disparador cada vez que muevo el mouse dentro del elemento dado

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
});

El contenido se expande cuando el ratón entra y se derrumba cuando las hojas de ratón, pero cada vez que el ratón se mueve dentro el elemento el contenido se expande y colapsa varias veces hasta que el ratón sale del elemento.

Nunca he tenido este problema antes, y he usado estas funciones en el pasado, así que no sé qué está pasando. ¿Algunas ideas?

Editar:

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200); 
    }); 
});

ahora estoy utilizando el código anterior y que sigue recibiendo el mismo problema exacto. He intentado todas las variaciones de la función .stop (falso, falso) (falso, verdadero) (verdadero, falso) (verdadero, verdadero). El problema ocurre de manera diferente con cada uno, pero aún ocurre.

ÚLTIMA EDICIÓN:

El problema fue que el contenido que se acercó el ratón estaba cubierto por un contenido diferente una vez que la función sea llamada. Por lo tanto, en cualquier punto dado, el mouse estaba ingresando y saliendo simultáneamente de la imagen. Resolvió el problema moviendo la llamada de función a un elemento diferente.

Fuente

2012-04-09 bcloutier

Esto sucede porque el '' burbuja mouseout' y eventos mouseover' hasta los padres, por lo que cuando se pasa sobre un elemento hijo del '.dropimage', su' 'burbuja mouseout' y eventos mouseover' hasta' .dropimage'. El uso de 'mouseleave' y' mouseenter' en su lugar solucionará el problema. Una vez que se resuelva ese problema, encontrará que necesita llamar '.stop (true, true)' before '.animate() 'para detener animaciones previas en caso de que pases el cursor sobre él varias veces rápidamente. –

He actualizado el código, pero el problema aún persiste. – bcloutier

tal vez su vincula el evento a la imagen y elemento? en lugar de solo la imagen? – Mouseroot

Trate de usar el evento .mouseenter en lugar de la .mouseover

creo que va a hacer!

Fuente

2012-04-09 21:25:50

agregar un .stop() antes de su .animate() ayudará a solucionar esto. al detener la animación anterior Esto evita que la animación de disparar varias veces si el usuario mueve el ratón sobre el elemento muchas veces rápidamente

Fuente

2012-04-09 21:25:43 Mouseroot

Es posible que necesite usar mouseenter en lugar de mouseover y mouseleave en lugar de mouseout

O puede tratar de utilizar .hover función como abajo,

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }, function(){ //mouseleave 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
});

Fuente

2012-04-09 21:26:18

También necesita mouseleave en lugar de mouseout. –

@KevinB Gracias Kevin. Actualizado y agregado más :) –

Puesto que usted está tratando de poner en práctica esto en un recipiente , su controlador de eventos correcto es mouseenter y mouseleave.

Ejemplo:

$("#dropdown-menu-create .dropimage").mouseenter(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
}); 
$("#dropdown-menu-create .dropimage").mouseleave(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"0"},200); 
});

Fuente

2012-04-09 21:27:32 Starx

Aunque esto puede no ser completamente relevante, tenía un problema similar. Todo lo que movería más sobre el div, el evento se dispararía. Para resolverlo, me di cuenta de que cuando se activaba el evento 'hover', el div toggled se había convertido en el que tenía el mouse. Para solucionarlo, acabo de agregar un evento en ese para atenuarlo con el mouse.

.profile-about { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 5%; 
     left: 0; 
     z-index: 2; 
     display: none; 
    } 

.profile-image { 
    max-height: 300px; 
    max-width: 300px; 
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
} 

    $('.profile-image').hover(function(){ 
     $(this).next().fadeIn(100); 
    }); 

    $('.profile-about').mouseleave(function(){ 
     $(this).fadeOut(100); 
    }); 


    <img src="img/somebody.jpg" class="profile-image"> 
        <div class="profile-about"> 
         <p> 
         Hello I am somebody! 
         </p> 
        </div>

Fuente

2017-05-09 20:03:51 VocoJax

Mouseover y mouseleave disparador cada vez que muevo el mouse dentro del elemento dado

Respuesta

Cuestiones relacionadas