предотвратить .mouseout событие от выполнения

Question

Я сделал список изображений и описаний в этой HTML структуры:

<div class="canDo"> 
    <p> 
     <img src="http://placehold.it/100x100" /> 
     <span>Description 1</span> 
    </p> 
    <p> 
     <img src="http://placehold.it/100x100" /> 
     <span>Description 2</span> 
    </p> 
    <p> 
     <img src="http://placehold.it/100x100" /> 
     <span>Description 3</span> 
    </p> 

    <p></p> 
</div> 

Я скрываю <span> с помощью CSS и добавьте описание в последнюю <p> с помощью функции JQuery. Структура HTML выбрана для работы с моей отзывчивой компоновкой.

$(document).ready(function() { 
    $(".canDo img").mouseover(function() { 
     $(".canDo img").removeClass('active').addClass('fade'); 
     $(this).addClass('active').removeClass('fade'); 
     $(".canDo p:last-child").fadeOut(function() { 
      var msg = $('.canDo img.active').next('span').html() 
      $(".canDo p:last-child").text(msg).fadeIn(); 
     }); 
    }) 
    .mouseout(function() { 
     setTimeout(function(){ 
      $(".canDo img").removeClass('active fade') 
      $(".canDo p:last-child").fadeOut(); 
     }, 3000); 
    }); 
}); 

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

Как я могу предотвратить это?

Я также сделал jsFiddle.

Answer 1

попробуйте это ... Я думаю, что это то, что вы хотите. дайте мне знать, если это не так.

http://jsfiddle.net/bpd2Ldy1/

так ... что я сделал присвоить результат функции setTimeout (который возвращает определенный тайм-аут идентификатор) переменной tm. Если он установлен (значит, что-то исчезает через 3 секунды), а пользователь мыши - над другой маленькой коробкой, он очистит и остановит таймаут. что позволяет ему не конфликтовать с новым событием mouseover. если ничего .canDo не затушевывается, таймаут завершается непрерывно через 3 секунды.

$(document).ready(function() { 
    $(".canDo img").mouseover(function() { 
     $(".canDo img").removeClass('active').addClass('fade'); 
     $(this).addClass('active').removeClass('fade'); 

     if (typeof(tm) != 'undefined') { 
      clearTimeout(tm); 
     } 
     $(".canDo p:last-child").stop().fadeOut(function() { 
      var msg = $('.canDo img.active').next('span').html() 
      $(".canDo p:last-child").text(msg).stop().fadeIn(); 
     }); 

    }) 
    .mouseout(function() { 
     tm = window.setTimeout(function(){ 
      $(".canDo img").removeClass('active fade') 
      $(".canDo p:last-child").stop().fadeOut("slow"); 
     }, 3000); 
    }); 
});