Эффект fadeIn/fadeOut продолжает зацикливаться при наведении на тег привязки - jQuery

Question

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

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

Вот мой код:

imgHover: function() {
   var bigImage = this.imageContainer.find('img');
   var imgInscription = $(bigImage).siblings('p');
   $(bigImage)
   .mouseenter(function(event) {
         event.stopPropagation();
         $( imgInscription ).stop().fadeIn(500)})
  .mouseleave(function() {    
         $( imgInscription ).stop().fadeOut(500);});}} 

И это актуально HTML:

<div id="pic-container">
   <img src="images/gallery/taureau_peace_large.jpg"  alt="Peaceful Lake View" />
   <p><a href='#' title='Read about adventure details'>Read about adventure >>> </a></p>
</div>

И немного CSS на всякий случай:

 #pic-container p {
 position:relative;
 top:-55px;
 display:none;}

Любая помощь будет высоко ценится:)

РЕДАКТИРОВАТЬ: Единственное решение, которое я до сих пор придумал, было привязать выцветание к изображению и абзацу отдельно. Не лучшее решение, но работает, поэтому я придерживаюсь его, пока не найду что-то лучшее.

var imgInscription = $('#pic-container p');

$('#pic-container img').hover(function(event) {
    event.stopImmediatePropagation();
    $(imgInscription).stop().fadeIn(500);
}, 
function() {
    $(imgInscription).stop().fadeOut(500);
});

$(imgInscription).hover(function(event) {
     event.stopImmediatePropagation();
     $(this).stop().fadeIn();
}, 
function() {
    $(this).stop().fadeOut(500);
});

Answer 1

.mouseenter(function(event) {
     event.stopPropagation();
     $( imgInscription ).stop(true).fadeIn(500)})
  .mouseleave(function() {    
         $( imgInscription ).stop(true).fadeOut(500);});}} 

попробуйте это, я добавил "true" в.stop

Answer 2

Попробуйте установить переменную в вашем конструкторе, которая хранит состояние абзаца. Пример:

this.pIsActive = false;

Затем в событиях mouseenter и mouseleave вы можете проверить, что происходит только с fadeIn и fadeOut, когда this.pIsActive ложь или истина (соответственно). Ваш обратный вызов (когда исчезновение завершено) для fadeIn и fadeOut изменится this.pIsActive, Например

imgHover: function() {
    var bigImage = this.imageContainer.find('img');
    var imgInscription = $(bigImage).siblings('p');
    $(bigImage)
    .mouseenter(function(event) {
         if (!this.pIsActive) {
             $( imgInscription ).stop().fadeIn(500, function() {
                 this.pIsActive = true;
             });
         }
     })
    .mouseleave(function() {    
    $( imgInscription ).stop().fadeOut(500);
        if (this.pIsActive) {
             $( imgInscription ).stop().fadeOut(500, function() {
                 this.pIsActive = false;
             });
         }
    });}}