jquery - Multiple class actions
<p>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. </p>

<p>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?</p>

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

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

<p>and heres the html block.</p>

<pre><code>&lt;div class="thumb clearfix"&gt;
 &lt;div class="image"&gt;
  &lt;a href="#" title="#"&gt;&lt;img src="images/simg/pimg.jpg" alt="#"&gt;&lt;/a&gt;

  &lt;div class="gallery-inner-thumb clearfix"&gt;
   &lt;div class="name"&gt;&lt;a href="#"&gt;Image Name&lt;/a&gt;&lt;/div&gt;
   &lt;div class="comments"&gt;&lt;a href="#"&gt;0&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;

 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks</p>
