¿Cómo aplico el mismo efecto jquery a dos objets(divs)?

[Alterno]

¡Saludos Gente!

Estoy tratando de aplicar el mismo efecto a divs con la misma clase, solo que cuando clickeo afecta a todos y no quiero que pase eso, ¿como hago para que solo se aplique de forma independiente?

Html:
<div class="sub-content-izquierda">
</div>

<div class="sub-content-centro">
<img src="img/dr.jpg" title"dentista"/><br /><br />Dra. Lizbeth Serrano
</div>

<div class="sub-content-derecha">
<div class="sub-content-derecha-in">
<img src="img/escudo-uaq.png" title="UAQ"/><br />
<p><b>Especialista en Pr&oacute;tesis.</b><br />(UNAM)</p>
</div>
</div>
</div>

Css:
#biografia{width:100%; height:160px;}

.sub-content-izquierda{width:33.3%;height:160px; float:left;}
.sub-content-centro{width:33.3%;height:160px; float:left;text-align:center;}
.sub-content-centro img{ margin-top:15px; cursor:pointer;}
.sub-content-derecha{width:33.3%;height:160px; float:left; text-align:left; overflow:hidden;}
.sub-content-derecha p{ margin-top:20px;margin-left:20px; font-size:14px;}
.sub-content-derecha img{margin-left:20px;}


jQuery:
$(document).ready(function() {
$('.sub-content-centro').on('click',function(event) {
$(".sub-content-izquierda").animate({width:"0%"},500);
$(".sub-content-derecha").animate({width:"66.6%"},500);
$(".sub-content-derecha-in").fadeIn(1200);
});
});

[siddartha23]

En Jquery el selector "this" hace referencia al objeto que activa el evento, en tu ejemplo tienes que usarlo y recorrer el dom con "prev", "next" y "children". Algo así:

Código Javascript:

function() { $(this).prev().animate({width:"0%"},500);}