jQuery verblassen in div für die Klassen zu wiederholen

Question

Ich versuche, etwas sehr ähnlich zu tun, was in dieser Frage erklärt - jQuery hover : fading in a hidden div while fading out the "default" one

Das Problem, das ich habe, ist ich die Fade-in/out auf einer wiederkehrenden Klasse verwenden möchten, anstelle dieses Beispiels, das eine einzelne ID als Selektor verwendet. In dem Moment, in dem ich über meinem Bild schwebe, verblasst auch jedes andere Bild auf der Seite, das dieselbe Klasse benutzt. Hier ist, was ich habe:

HTML

<div class="test"> 
      <div class="img rounded"> 
       <div class="post_image"> <a href="#"><img src="http://graphics8.nytimes.com/images/2009/07/19/arts/Pool4.jpg" border="0"></a> 
       </div> 
      </div> 
      <div class="post_body hide"> 
       <p>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 
       </p> 
      </div> 
     </div> 


      <div class="test"> 
      <div class="img rounded"> 
       <div class="post_image"> <a href="#"><img src="http://graphics8.nytimes.com/images/2009/07/19/arts/Pool4.jpg" border="0"></a> 
       </div> 
      </div> 
      <div class="post_body hide"> 
       <p>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 
       </p> 
      </div> 
     </div> 

jQuery

<script type="text/javascript"> 
$(function(){ 
$('.test').hover(
     function(){ 
      $('.post_image').fadeOut(100, function(){ 
       $('.post_body').fadeIn(100);       
      }); 
     }, 
     function(){ 
      $('.post_body').fadeOut(100, function(){ 
       $('.post_image').fadeIn(100);       
      }); 
     } 
     ); 


}); 
</script> 

Ich bin ziemlich sicher, ich brauche eine $ (this) in der jQuery aber nicht kann Mach es zur Arbeit. Jede Hilfe sehr geschätzt!

Answer 1

Verwendung des $(this) Objekt und die find() Funktion sollte besser für Sie arbeiten:

$(function(){ 
    $('.test').hover(function(){ 
     $(this).find('.post_image').fadeOut(100,function(){ 
      $('.post_body').fadeIn(100); 
     }); 
    },function(){ 
     $(this).find('.post_body').fadeOut(100,function(){ 
      $('.post_image').fadeIn(100); 
     }); 
    }); 
});