title: jQuery fade in div for repeating classes
body: <p>I'm trying to do something very similar to whats explained in this question - <a href="https://stackoverflow.com/questions/1170702/jquery-hover-fading-in-a-hidden-div-while-fading-out-the-default-one">jQuery hover : fading in a hidden div while fading out the &quot;default&quot; one</a></p>
  
  <p>The problem I have is I want to use the fade in/ out on a repeating class, rather than this example which uses a single ID as the selector. At the moment when hovering over my image every other image on the page which uses the same class also fades. Here's what I've got:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="test"&gt;
              &lt;div class="img rounded"&gt;
                  &lt;div class="post_image"&gt; &lt;a href="#"&gt;&lt;img src="http://graphics8.nytimes.com/images/2009/07/19/arts/Pool4.jpg" border="0"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="post_body hide"&gt;
                  &lt;p&gt;This is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fade This is a dummy text
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
              &lt;div class="test"&gt;
              &lt;div class="img rounded"&gt;
                  &lt;div class="post_image"&gt; &lt;a href="#"&gt;&lt;img src="http://graphics8.nytimes.com/images/2009/07/19/arts/Pool4.jpg" border="0"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="post_body hide"&gt;
                  &lt;p&gt;This is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fade This is a dummy text
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
  $('.test').hover(
          function(){
              $('.post_image').fadeOut(100, function(){
                  $('.post_body').fadeIn(100);                         
              });
          },
          function(){
              $('.post_body').fadeOut(100, function(){
                  $('.post_image').fadeIn(100);                        
              });
          }
          );
  
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm pretty sure I need a $(this) in the jQuery but can't get it to work. Any help much appreciated!</p>