jquery - 多個類的動作

Question

當鼠標懸停在圖像上時，我有一個簡單的滑動框向上滑動顯示圖像以顯示一些信息。這工作正常，但我有同一頁上的多個圖像，所以當你將鼠標懸停在任何圖像上時，所有的框都會滑動。

有沒有一種簡單的方法來排序，所以只有你懸停的圖像滑過了？或者它基本上是爲每個圖像縮略圖創建相同的代碼，說明不同的ID？

繼承人的jQuery的 - 隨時糾正在這個片段中的任何錯誤，因爲我很新的這

$('#gallery-inner .thumb .gallery-inner-thumb').hide(); 
$("#gallery-inner .thumb").hover(function() { 
    $("#gallery-inner .thumb .gallery-inner-thumb").show().animate({margin:'-36px 0 0'},'fast'); 
    }, function() { 
    $("#gallery-inner .thumb .gallery-inner-thumb").animate({margin:'1px 0 0'},'fast'); 
}); 

和繼承人的HTML塊。

<div class="thumb clearfix"> 
    <div class="image"> 
     <a href="#" title="#"><img src="images/simg/pimg.jpg" alt="#"></a> 

     <div class="gallery-inner-thumb clearfix"> 
      <div class="name"><a href="#">Image Name</a></div> 
      <div class="comments"><a href="#">0</a></div> 
     </div> 

    </div> 
</div> 

由於

Answer 1

jQuery的傳遞作爲this目標元素到事件處理程序。因此，你可以做這樣的事情：

$("#gallery-inner .thumb").hover(function() // mouse over target 
    { 
     // select child of target .thumb with class .gallery-inner-thumb 
     $(".gallery-inner-thumb", this) 
     .show().animate({margin:'-36px 0 0'},'fast'); 
    }, 
    function() // mouse off of target 
    { 
     // select child of target .thumb with class .gallery-inner-thumb 
     $(".gallery-inner-thumb", this) 
     .animate({margin:'1px 0 0'},'fast'); 
    }); 

...它會適用於每個縮略圖單獨。這裏的關鍵是在選擇孩子顯示/動畫時指定一個上下文（this - 事件目標）到jQuery函數。