Diapositive JQuery élément par élément

Question

Je suis en train d'écrire un code jQuery qui glisse dans un div enfant en survol. Parce que j'ai plusieurs éléments enfants sous cette classe, il y a un problème qui survient sur n'importe quel élément parent, tous les éléments enfant montrent même pour les éléments qui n'ont pas été planés. Je veux faire glisser le div contenant le texte lorsque l'élément parent est plané. mon exemple de code est ici et un violon est here

Css est ici

.artistAndVideo { 
    background-color: black; 
    display: none; 
    color: white; 
    bottom: 0px; 
    position: absolute; 
    margin-bottom: 6px; 
    width: 211px; 
    text-align: center; 
    height: 40px; 
    opacity:0.4; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

HTML

<div id="mycarousel" class="jcarousel-skin-ie7"> 
       <ul> 
    <li><div style="overflow:hidden;"><img src="image.png" width="211" height="170"/><div class="artistAndVideo"><span style="opacity:1;">some stuff here<span></div></div>'; 
     <div style="overflow:hidden;"><img src="image.png" width="211" height="170" /><div class="artistAndVideo"><span style="opacity:1;">some stuff here<span></div></div>'; 
     </li><li> <div style="overflow:hidden;"><img src="image.png" width="211" height="170" /><div class="artistAndVideo"><span style="opacity:1;">some stuff here<span></div></div>'; 
    </li> </ul> 
      </div> 

Javascript

$("#mycarousel").hover(function(){     
        $('.artistAndVideo').slideToggle(); 
       }); 

Answer 1

Essayez ceci:

$("#mycarousel li").hover(function() { 
    $(this).find('.artistAndVideo').stop(true,true).animate({ top : -45}); 
    },function() { 
    $(this).find('.artistAndVideo').stop(true,true).animate({ top : -5}); 
}); 

Html: Tous les éléments à l'intérieur d'un ul doit être à l'intérieur d'un li

<div id="mycarousel" class="jcarousel-skin-ie7"> 
<ul> 
    <li> 
     <div style="overflow:hidden;height:170px;margin-bottom:10px"> 
      <img src="image.png" width="211" height="170" /> 
      <div class="artistAndVideo"><span style="opacity:1;">some stuff here</span> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div style="overflow:hidden;;height:170px;margin-bottom:10px"> 
      <img src="image.png" width="211" height="170" /> 
      <div class="artistAndVideo"><span style="opacity:1;">some stuff here</span> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div style="overflow:hidden;;height:170px;margin-bottom:10px"> 
      <img src="image.png" width="211" height="170" /> 
      <div class="artistAndVideo"><span style="opacity:1;">some stuff here</span> 
      </div> 
     </div> 
    </li> 
</ul> 
</div> 

Css:

.artistAndVideo { 
    background-color: black; 
    display: block; 
    color: white; 
    bottom: 0px; 
    position: relative; 
    top: -5px; 
    margin-bottom: 6px; 
    width: 211px; 
    text-align: center; 
    height: 40px; 
    opacity:0.4; 
    filter:alpha(opacity=40); 
    /* For IE8 and earlier */ 
} 

DEMO