Problema con JavaScript

[Banditolane]

Buenas a todos:

Tengo un problema con un portfolio que estoy creando. Consiste en una division que contiene un head, y otra pequeña div donde viene la info sobre el trabajo. Para esto quiero emplear clases, de manera que con un solo estilo pueda hacer todos los muestrarios que quiera. Pero al aplicarle el efecto con jQuery, quiero dejar un tiempo de margen para que no se abra sola por un desplazamiento. Además, también evita así el antiestético error de que se abra y cierre una y otra vez. El problema es que utilizo una función a la que luego le aplico un setTimeout pero esto ya no me permite utilzar el this y entonces se abren todas las clases con el mismo nombre... Os pongo el código para que lo veais mas claro:

/* Estos son los estilos */

Código:
.div {
width:400px;height:300px;background:lightgrey;marg in:auto;
}
.bar {
width:400px;height:30px;overflow:hidden;
}
.head {
width:400px;height:30px;background:grey;float:left ;
}
.info {
width:400px;height:140px;background:#444444;float: left;color:white;
}



/* Y esto el condigo JavaScript */

function infoOpen() {
$(this).animate({height:170},'easein');
};
function infoClose() {
$(this).animate({height:30},'easeout');
};
$('.bar').hover( function() {
clearTimeout(infoClose);
setTimeout(infoOpen, 370);
},function() {
clearTimeout(infoOpen);
setTimeout(infoClose, 700);
}); <-- /* En este caso no me reconoce los this con respecto al .bar */



function infoOpen() {
$('.bar').animate({height:170},'easein');
};
function infoClose() {
$('.bar').animate({height:30},'easeout');
};
$('.bar').hover( function() {
clearTimeout(infoClose);
setTimeout(infoOpen, 370);
},function() {
clearTimeout(infoOpen);
setTimeout(infoClose, 700);
}); <-- /* Y en este abre todos los .bar a la vez... */

Bueno creo que el problema es muy sencillo, pero soy muy novato y no sé solucionarlo, si alguien con más experiencia pudiera echarme un cable le estaría muy agradecido.

Gracias y un saludo!