Spust za pomocą myszki i myszy za każdym razem, gdy poruszam myszą wewnątrz danego elementu

Question

Tworzę witrynę, w której umieścisz mysz nad obrazem i pokazuje element (w tym przypadku, zwiększając jego wysokość od 0 do 154 pikseli).

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

Zawartość rozszerza się, gdy mysz wchodzi i zapada się, gdy liście mysz, ale za każdym razem, kiedy mysz jest przesuwana ciągu element treści można rozwijać i zwijać, aż mysz opuszcza element.

Nigdy wcześniej nie miałem tego problemu, a ja używałem tych funkcji w przeszłości, więc nie mam pojęcia, co się dzieje. Jakieś pomysły?

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

Jestem teraz używając powyższy kod i wciąż się dokładnie ten sam problem. Próbowałem wszystkich odmian funkcji .stop (false, false) (false, true) (true, false) (true, true). Problem występuje z każdym z nich inaczej, ale nadal występuje.

ULTIMATE EDIT:

Problem polegał na tym, że zawartość że mysz podeszła została pokryta przez różnej zawartości, gdy funkcja została wywołana. Dlatego w dowolnym punkcie mysz jednocześnie wchodziła i wychodziła z obrazu. Rozwiązano problem, przenosząc wywołanie funkcji do innego elementu.

Answer 1

wypalania wiele razy, gdy użytkownik przesuwa kursor myszy nad elementem wielokrotnie Spróbuj użyć zdarzenia .mouseenter zamiast .mouseover

myślę, że zrobi!

Answer 2

dodanie .stop() przed .animate() pomoże to naprawić. zatrzymując Poprzednia animacja zapobiega animację szybko

Answer 3

Może trzeba użyć mouseenter zamiast mouseover i mouseleave zamiast mouseout

Albo można spróbować skorzystać .hover funkcję jak poniżej,

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

Ponieważ staramy się wdrożyć to w kontenerze , Twoja poprawna obsługa zdarzeń to mouseenter i mouseleave.

Przykład:

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

Chociaż może to nie być całkowicie istotne, miałem podobny problem. Wszystko, co chciałbym przenieść najbardziej nad div, wydarzenie wybuchłoby. Aby rozwiązać ten problem, zdałem sobie sprawę, że po wywołaniu zdarzenia "hover" włączany div stał się tym, który skończyła moja mysz. Aby to naprawić, właśnie dodałem do tego wydarzenie, aby zlikwidować je na urlopie myszy.

.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>