Trigger mouseover e mouseleave ogni volta che muovo il mouse all'interno dell'elemento specificato

Question

Sto creando un sito in cui si passa il mouse sopra un'immagine e si mostra un elemento (in questo caso espandendo la sua altezza da 0 a 154 pixel).

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

Il contenuto espande quando il mouse entra e collassa quando le foglie di topo, ma ogni volta che il mouse viene spostato all'interno dell'elemento contenuto espande e si comprime ripetutamente fino a quando il mouse esce l'elemento.

Non ho mai avuto questo problema prima, e ho usato queste funzioni in passato, quindi non ho idea di cosa sta succedendo. Qualche idea?

Edit:

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

ora sto usando il codice di cui sopra e ancora ottenere lo stesso problema esatto. Ho provato tutte le varianti della funzione .stop (false, false) (false, true) (true, false) (true, true). Il problema si verifica in modo diverso con ciascuno, ma si verifica ancora.

ULTIMATE EDIT:

Il problema era che il contenuto che il mouse è andato oltre è stato coperto da un contenuto diverso una volta che la funzione è stata chiamata. Pertanto, in qualsiasi momento il mouse entrava e usciva contemporaneamente dall'immagine. Risolto il problema spostando la chiamata di funzione su un elemento diverso.

Answer 1

Provare a utilizzare l'evento .mouseenter al posto del .mouseover

penso che farà!

Answer 2

aggiungendo un .stop() prima che l'utente .animate() possa risolvere il problema. interrompendo l'animazione precedente questo modo si evita l'animazione sparando più volte se l'utente sposta il mouse sopra l'elemento più volte rapidamente

Answer 3

Potrebbe essere necessario utilizzare mouseenter invece di mouseover e mouseleave invece di mouseout

Oppure si può cercare di utilizzare .hover la funzione come sotto,

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

Answer 4

Dal momento che si sta cercando di implementare questo su un contenitore , il gestore di eventi corretto è mouseenter e mouseleave.

Esempio:

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

Answer 5

Anche se questo potrebbe non essere del tutto pertinente, ho avuto un problema simile. Tutto ciò che vorrei spostare di più sul div, l'evento potrebbe sparare. Per risolverlo, mi sono reso conto che quando è stato attivato l'evento "hover", il div di commutazione era diventato quello che il mio mouse era finito. Per aggiustarlo, ho appena aggiunto un evento su quello per svanire in permesso al 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>