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 */

.div {
width:400px;height:300px;background:lightgrey;margin: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!

Prueba esto .... asi te dara lo mismo que entres y salgas todo el rato

$('.bar').hover(function() {
    $(this).stop(true).animate({height:170},'easein');
}, function() {
    $(this).stop(true).animate({height:30},'easeout'); 
});

Joder tio, tu eres el amo!!!Ya había perdido toda esperanza...jajajaja! Muchísimas gracias. Aunque por otra parte me proponían algo así como sustituir el $(this) por una variable tal que así:

var esto = $(this);

y hacer las funciones asi:

esto.animate(....);

y luego en el setTimeout, llamarla asi:

setTimeout("funcion(esto)", 300);

Que opinas de eso. No he sido capaz de lograrlo pero me gustaría conseguirlo de esa manera. Aunque por el momento me has salvao el culo. Muchas gracias otra vez!!!

Un Saludo!

$('.bar') tiene todos los elementos con clase "bar", si lo igualas a una variable para utilizarla en la animacion, no vas a saber en que elemento se ha producido el evento y por lo tanto estarias animando todos a la vez...

Si quieres aplicar una demora para que no se despliegue nada mas pasar por encima puedes hacer esto (te lo digo de memoria y sin probarlo, puedo equivocarme):

$('.bar').hover(function() {
    $(this).delay(300).animate({height:170},'easein');
}, function() {
     $(this).stop(true).animate({height:30},'easeout'); 
});

Ese seria todo el codigo javascript que necesitas para hacer lo que comentas.

Edito: Viendo el codigo veo que faltan cosas... mejor esto

var defTime = 300;
 $('.bar').hover(function() {
    var obj = $(this); 
    var dTime = obj.data('dTime') || defTime; 
    obj.stop(true).delay(dTime).animate({height:'170px'}, 'fast', 'easein');
}, function() {
    var obj = $(this);
    obj.data('dTime',1); 
    obj.stop(true).animate({height:'30px'}, {
        duration: 'fast',
        easing: 'easeout', 
        complete: function() { obj.data('dTime',defTime); } 
    }); 
});

Asi esta la cosa mas completa ... en resumidas cuentas: solo aplica el delay de 300 milisegundos cuando esta cerrado, si entras y sales estando dentro de una animacion sera fluido... en el momento que se ha cerrado el delay vuelve a ser de 300 como al principio.

Bueno, no he sido capaz de aplicar el 2º código que has propuesto, sobretodo xk no entiendo la parte del "obj.data('dTime')..." jajaja! Pero de todas maneras la 1ª ya me sirve. Le daré un par de vueltas más a ver si soy capaz de sacarla pero en principio está bien. MUCHISIMAS GRACIAS!!!!! He estado preguntando en varios foros y no he conseguido hacerlo hasta que llegaste tú. En serio, para ti esto seguro es una tontería, pero para mí eres un crack!!! De todas maneras, lo que he hecho ha sido escribir tu código tal cual y luego he modificado un par de cosas para ver si así me funcionaba, quizá tenga que adaptarlo un poco más... No estaría de más aprender nuevas cosikas, así que si no es mucha molestia y podemos emplear la 2º opción que has propuesto sería genial, sino no hay problema, ya me has ayudado bastante!

Un Saludo Máquina!

Ummmm... he asumido que tienes puesto el "extra" de jQuery para hacer el easing de la animacion y no debe ser asi. Te dejo el codigo sin eso: (y te lo dejo preparado para que puedas ponerlo en cualquier parte de la pagina, por ejemplo en la cabecera)

$(function() {
    var defTime = 300;
    $('.bar').hover(function() {
        var obj = $(this);
        var dTime = obj.data('dTime') || defTime;
        obj.stop(true).delay(dTime).animate({height:'170px'}, 'fast');
    }, function() {
        var obj = $(this);
        obj.data('dTime',1);
        obj.stop(true).animate({height:'30px'}, {
            duration: 'fast',
            complete: function() { obj.data('dTime',defTime); }
        });
    });
});

PD: el metodo data() lo que hace es guardar/recuperar datos dentro de un objeto... en este caso almacenar el tiempo de espera que se aplica en cada momento a ese objeto.

Bueno, esta vez si me ha funcionado y está perfecto al 100%. !Mil gracias¡ Además, entiendo el funcionamiento del .data, pero tengo otra pregunta: ¿.data puede almacenar cualquier tipo de datos como una variable? De todas maneras ya he aprendido dos cosas nuevas, el .data y el .delay. Aun hay partes del código que no entiendo como lo del complete:, pero ya iré avanzando en el uso del JavaScript...

¡¡VIVA MIARROBA!!

Un Saludo!

data():
http://api.jquery.com/data/

El complete de animate():
http://api.jquery.com/animate/