Вопрос по jquery – Mouseover и mouseleave срабатывают каждый раз, когда я перемещаю мышь внутри данного элемента

12

Я создаю сайт, где вы наводите курсор мыши на изображение, и оно показывает элемент (в данном случае, увеличивая его высоту с 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);
    });
});

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

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

Редактировать:

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:

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

Error: User Rate Limit Exceeded Mouseroot
Error: User Rate Limit Exceeded bcloutier
Error: User Rate Limit ExceededmouseoutError: User Rate Limit ExceededmouseoverError: User Rate Limit Exceeded.dropimageError: User Rate Limit ExceededmouseoutError: User Rate Limit ExceededmouseoverError: User Rate Limit Exceeded.dropimageError: User Rate Limit ExceededmouseleaveError: User Rate Limit ExceededmouseenterError: User Rate Limit Exceeded.stop(true,true)Error: User Rate Limit Exceeded.animate()Error: User Rate Limit Exceeded Kevin B
Error: User Rate Limit Exceeded yakobom
Error: User Rate Limit Exceeded bcloutier

Ваш Ответ

5   ответов
6

mouseentermouseovermouseleavemouseout

.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);
    });
});
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

12

3

mouseentermouseleave.

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

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

Похожие вопросы