.hover() продолжает повторяться, пока элемент все еще находится

Question

Я получаю странное поведение от JQuery .hover() метод. я имею imgи каждый из них должен отображать следующий контейнер .item-info при наведении Я использую этот код:

  $('img.thumbnail-class').hover(function() { 
      $(this).next(".item-info").stop(true, true).fadeIn(250); 
  }, function() { 
      $(this).next(".item-info").stop(true, true).fadeOut(250); 
  });

И я получаю такое поведение: когда изображение .thumbnail-class завис, следующий .item-info исчезает, исчезает, исчезает и остается. Когда мышь все еще держит изображение, но движется, .item-info постепенно исчезает и снова и т. д., пока мышь не покинет изображение.

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

?

Спасибо!

Answer 1

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

$('img.thumbnail-class').mouseover(function() { 
      $(this).next(".item-info").fadeIn(250).one("mouseout", function(){
          $(this).fadeOut(250); 
      });
});

Смотрите эту скрипку: http://jsfiddle.net/p8nfyjux/