jquery - Multiple class actions

Question

I've a simple sliding box slide up over an image to display some info when you hover over the image. This works fine but i have multiple images on the same page so when you hover over any of the images all of the boxes slide up.

Is there a simple way to sort this so only the image you hover over slides up? Or is it basically creating the same code stating different ID's for each image thumbnail?

Heres the jquery - feel free to correct any errors in this snippet as i'm very new to it

$('#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');
});

and heres the html block.

<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>

Thanks

Answer 1

jQuery passes the target element to event handlers as this. Therefore, you can do something like:

$("#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');
   });

...and it'll work for each thumbnail individually. Key here is specifying a context (this - the event target) to the jQuery function when selecting children to show / animate.