Как использовать силу JQuery mouseenter fadein снова?

Question

Я пытаюсь создать меню, где наведите указатель мыши на фотографию, чтобы отобразить имя человека и некоторые ссылки под изображением. Я использовал mouseenter и fadein для эффекта зависания в сочетании с классом css, который имеет цвет фона, установленный на белый (так что новый элемент будет покрывать старый). Когда я пытаюсь вернуться к определенному пункту меню, который уже был показан, ничего не происходит. Кроме того, зависание не работает на определенных элементах. Когда я курсирую слева, наведение не работает на трех элементах. Когда я нахожусь с правой стороны, работают только первые два элемента. Не могли бы вы предложить, какие могут быть проблемы, и как они могут быть решены? Обратите внимание, что мне нужно иметь меню, которое показывает, когда отображается указатель мыши, чтобы пользователь мог щелкнуть ссылки, которые будут там предоставлены.

сценарий:

$(document).ready(function() { 
    $("#pau").mouseenter(function(){ 
     $("#paup").fadeIn(600); 
    }); 
    $("#red").mouseenter(function(){ 
     $("#redp").fadeIn(600); 
    }); 
    $("#aesthet").mouseenter(function(){ 
     $("#aesthetp").fadeIn(600); 
    }); 
    $("#danny").mouseenter(function(){ 
     $("#dannyp").fadeIn(600); 
    }); 
    $("#kisic").mouseenter(function(){ 
     $("#kisicp").fadeIn(600); 
    }); 
    $("#fake").mouseenter(function(){ 
     $("#fakep").fadeIn(600); 
    }); 
    $("#kaa").mouseenter(function(){ 
     $("#kaap").fadeIn(600); 
    }); 
    $("#heels").mouseenter(function(){ 
     $("#heelsp").fadeIn(600); 
    }); 
    $("#hodanajan").mouseenter(function(){ 
     $("#hodanajanp").fadeIn(600); 
    }); 
    $("#jakub").mouseenter(function(){ 
     $("#jakubp").fadeIn(600); 
    }); 
}); 

HTML:

<div class='people'> 
<div class='containertriangles'> 
    <div class='wrap' id='aesthet'> 
     <div class='crop'> 
      <img src='./img/triangles/aesthet.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='fake'> 
     <div class='crop'> 
      <img src='./img/triangles/afakeartist.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='danny'> 
     <div class='crop'> 
      <img src='./img/triangles/dannyrose.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='heels'> 
     <div class='crop'> 
      <img src='./img/triangles/heelsinprague.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='hodanajan'> 
     <div class='crop'> 
      <img src='./img/triangles/hodanajan.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='jakub'> 
     <div class='crop'> 
      <img src='./img/triangles/jakubmarik.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='kaa'> 
     <div class='crop'> 
      <img src='./img/triangles/kaaglo.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='pau'> 
     <div class='crop'> 
      <img src='./img/triangles/paulinemma.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='red'> 
     <div class='crop'> 
      <img src='./img/triangles/redpoppy.jpg'> 
     </div> 
    </div> 
    <div class='wrap' id='kisic'> 
     <div class='crop'> 
      <img src='./img/triangles/sandrakisic.jpg'> 
     </div> 
    </div> 
</div> 

CSS:

#aesthetp, #dannyp, #fakep, #heelsp, #hodanajanp, #jakubp, #kaap, #kisicp, #paup, #redp{ 
display:none; 
position:absolute; 
left:0; 
right:0; 
margin-top:-70px; 
background-color:white;} 

Im используя этот треугольный макет я получил здесь: http://codepen.io/mikehobizal/pen/EHDsu

Ваша помощь очень ценится.

Answer 1

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

<div class='wrap link'> 
    <div class='crop'> 
     <img src='./img/triangles/jakubmarik.jpg'> 
    </div> 
    <div class="content"> 
     text and other stuff here 
    </div> 
</div> 

Тогда вы можете упростить JavaScript:

$(".link").mouseenter(function(){ 
    $(.content').hide(); 
    $(this).find('.content').fadeIn(600); 
}); 

Это будет скрыть все дивы контента и показать один вложен в DIV вы в настоящее время более.

Вы все равно должны иметь возможность абсолютного расположения разделов содержимого, пока весь навигатор обернут и имеет положение: относительное.

Answer 2

jQuery fadeIn Функция будет работать только на скрытом элементе! Таким образом, вам нужно будет снова спрятаться после утрачен в

В этом примере показано, как повторно скрыть элемент, а затем исчезать его снова:.

$("#pau").mouseenter(function(){ 
    $("#paup").hide().fadeIn(600); 
});