¡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ó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);
});
});