jQuery le plus proche();

Question

J'essaye d'animer une image qui est partiellement cachée (via overflow: hidden) dans un élément de la liste. Je veux que cela se produise lorsqu'un utilisateur survole un tag A à l'intérieur du même élément de liste.

je le balisage suivant:

<div id="projects" class="section"> 
    <ul> 
     <li> 
      <img src="assets/img/projects/pf6.jpg" width="980" height="500" alt="Project title" /> 
      <h2 class="left middle"><span>new</span><a href="#">Title 1</a></h2> 
     </li> 
     <li> 
      <img src="assets/img/projects/pf4.jpg" width="980" height="500" alt="Project title" /> 
      <h2 class="bottom right"><a href="#">Title 2</a></h2> 
     </li> 
    </ul> 
</div> 

Mon css de base:

#projects ul li { 
    width: 100%; 
    height: 450px; 
    position: relative; 
    display: block; 
    margin-bottom: 20px; 
    color: #fff; 
    overflow: hidden; 
} 

#projects ul li img { 
    position: absolute; 
    top: -50px; 
    left: 0; 
} 

Je suis en train de ce qui suit avec jQuery pour déplacer l'image (en vain):

$("#projects li h2 a").hover(
    function() { 
     $(this).closest("img").animate({paddingTop: "50px"}, "slow"); 
    }, 
    function() { 
     $(this).closest("img").animate({paddingTop: "0"}, "slow"); 
    } 
); 

Tout le monde a une idée de pourquoi cela ne fonctionne pas! - toute aide très appréciée :-)

Answer 1

closest() ne sélectionne que l'élément en cours et ses éléments parents (et le limite ensuite à la première correspondance).

Votre élément img est pas un parent du lien que vous avez le gestionnaire de vol stationnaire sur, donc il ne fonctionne pas.

Mise à jour: comme souligné par ScottyUSCD, le code précédent que j'ai posté ne fonctionnera pas. J'ai mal lu la source et j'ai pensé que les éléments étaient des frères et soeurs.

Sa réponse était correcte:

$(this).closest("li").children("img") 

Ce naviguera jusqu'à le plus proche parent élément li, puis regardez à travers les enfants de cet élément pour tous img éléments.

Answer 2

Je pense qu'il devrait être:

$(this).closest("li").children("img").animate() 

Ou vous pourriez faire:

$(this).closest("h2").prevAll("img") 

Answer 3

Si le <img> pourrait aussi être après la <h2>, utilisez:

$(this).closest("h2").siblings("img");