Jquery Hover действует странно, когда я оставляю мышь над элементом

Question

У меня есть следующий HTML:

<div id="join-us-subheader-imgs">
    <div class="subheader-img-wrapper">
      <img src="/wp-content/themes/lib/join_us/join-us_1.png">
      <p class="img-quote">"This is a quote example. And there's more text here."</p>
    </div>
    <div class="subheader-img-wrapper">
      <img src="/wp-content/themes/lib/join_us/join-us_2.png">
      <p class="img-quote">"This is a quote example. And there's more text here."</p>
    </div>
</div>

и css:

.subheader-img-wrapper {
    float: left;
    margin-right: 10px;
    position: relative;
}

.subheader-img-wrapper img:hover{
    cursor: pointer;
}

.img-quote {
    display: none;
    width: 125px;
    height: 80px;
    position: absolute;
    top: 0;
}

и JavaScript:

$(document).ready(function() {
    $(".subheader-img-wrapper").hover(
        function(){
            $(this).find('img:first').fadeOut("slow", function(){           
                $(this).parent().find('p:first').fadeIn("slow");
            });
        },
        function(){
            $(this).find('p:first').fadeOut("slow", function() {            
                $(this).parent().find('img:first').fadeIn("slow");
            });
        }
    );
});

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

Answer 1

Я думаю, вам нужно сделать 3 изменения,

a.Вместо наведения мыши вы должны реализовать обработчик mouseenter для тега img и mouseout для тега p 1005 *

b.Изменить css .img-quote position: relative;

c.Выполните последовательность fadeIn и fadeOut, используя метод обратного вызова, чтобы теги img и p не отображались одновременно.

DEMO

Answer 2

Это происходит потому, что когда .fadeOut функции заканчиваются, элемент получает событие отключения мыши, запускающее другую функцию ..