Мышь и мышь запускаются каждый раз, когда я перемещаю мышь внутри данного элемента

Я создаю сайт, на котором вы наводите мышь на изображение, и он показывает элемент (в этом случае, расширяя его высоту от 0 до 154 пикселей).

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

Содержимое расширяется, когда мышь входит и сжимается, когда мышь уходит, но каждый раз, когда мышь перемещается внутри элемента, содержимое расширяется и сжимается до тех пор, пока мышь не покинет элемент.

У меня никогда не было этой проблемы раньше, и я использовал эти функции в прошлом, поэтому я не понимаю, что происходит. Любые идеи?

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

Теперь я использую код выше и все еще получаю точно такую же проблему. Я пробовал все варианты функции .stop(false, false) (false, true) (true, false) (true, true). Проблема возникает по-разному с каждым, но это все еще происходит.

ULTIMATE EDIT:

Проблема заключалась в том, что содержимое, над которым проходила мышь, было закрыто разным контентом после вызова функции. Поэтому в любой точке мышь одновременно вводила и оставляла изображение. Решил проблему, переместив вызов функции на другой элемент.

Ответ 1

Попробуйте использовать .mouseenter событие вместо .mouseover

Я думаю, что это сделает!

Ответ 2

Возможно, вам придется использовать mouseenter вместо mouseover и mouseleave вместо mouseout

Или вы можете попробовать и использовать функцию .hover, как показано ниже,

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

Ответ 3

Поскольку вы пытаетесь реализовать это в контейнере, ваш правильный обработчик событий mouseenter и mouseleave.

Пример:

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

Ответ 4

добавив .stop(), прежде чем ваш .animate() поможет исправить это. останавливая предыдущую анимацию, это предотвращает многократное срабатывание анимации, если пользователь много раз быстро перемещает указатель мыши над элементом

Ответ 5

Хотя это может быть не совсем актуально, у меня была аналогичная проблема. Все, что я переместил бы больше всего на div, событие зажгло бы. Чтобы решить эту проблему, я понял, что когда событие "зависание" было запущено, переключенный div стал тем, над которым была моя мышь. Чтобы исправить это, я просто добавил событие на этом, чтобы исчезнуть при уходе с мыши.

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