Problema .load jQuery

[LoGaNsF]

Hola,

Ando liado con mi web, ya casi la tengo lista, y me encuentro atascado con el .load, quizás no se como funciona o algo estoy haciendo mal.

Estoy haciendo una sección portfolio para mostrar mis trabajos. Pues bien, tengo una "galería" de miniaturas y pulsando sobre la capa (son capas con imágenes de fondo) se despliega en la parte superior de la galería una capa con una imagen y la descripción del trabajo, así como un enlace para ir al sitio a verlo.

Lo que es abrirse (le he puesto un slideUp/Down) lo hace bien, pero tengo un load que carga el contenido de esa capa oculta, se muestra muy rápido. Es decir, pulso en la galería, se despliega la capa con los datos cargados. Estupendo, pero ahora que esta abierta pulso sobre otro "trabajo" y el load carga los datos en la capa, esta se repliega y se despliega. Yo quiero que se repliegue primero, luego cargue los datos con load y se despliegue. Os pongo el código que tengo ahora mismo, he probado muchas cosas, esto es lo ultimo:

Código:

       $('.pf').on({
		'mouseover': function(){
			$(this).find('.desc').stop(false, true).slideDown();
		},
		'mouseout': function(){
			$(this).find('.desc').stop(false, true).slideUp();
		},
		'click': function(){
			var $disp 	= $('#pf-display'),
				dir 	= './portfolio.html #display-' + $(this).attr('id');
			
			$disp.ajaxStart(function(){
				if($(this).is(':visible'))
					$(this).slideUp(400);
			});

			$disp.ajaxStop(function(){
				if($(this).html() !== '')
					$(this).slideDown(600);
			});

			$disp.slideUp(400).load(dir);
		}
	});

Los "pf" son las capas sobre las que pulsar, los eventos de entrada y salida del ratón son para mostrar una descripción, eso va bien.

Lo que tenia antes era el slideUp (solo si era visible), hacia la carga con load y en el callback de este le decía que hiciera slideDown, también probé load(...).slideDown(), pero nada.

A ver si sabéis que estoy haciendo mal.

Gracias.

Un saludo.

[maycolalvarez]

recuerde que AJAX es asíncrono, lo ideal es realizar el efecto una vez obtenida la data en el onreadystatechange, en el caso de jQuery varía según el método, consulte su api

[LoGaNsF]

Si, pero es que me carga los datos antes del efecto de cierre. No se si es a eso a lo que te refieres. En la documentación no veo nada que me valga, concretamente en este método hay poca ya que no es muy complicado.

Lo he "arreglado" de una forma un tanto cutre, según se mire. Oculto la capa y ejecuto el load en un setTimeout igual al tiempo que tarda en ocultarse (400) y después del load hago que se muestre. Va perfecto, porque ademas he aprovechado para añadir alguna funcionalidad extra como que si pulsas en la que esta abierta se cierre.

Funciona, pero tiene que poder hacerse mas simple y quiero saber como, que es lo que me falla. Estoy también aprendiendo jQuery (mi primer proyecto con el) y no quiero quedarme con la duda.

[LoGaNsF]

A ver, otro problema, esta vez, como no, con IE...

El código ha quedado así:

Código:

var $disp 	= $('#pf-display'),
	pf 	= $(this).attr('id'),
	dir 	= './portfolio.html #display-' + pf;

if($disp.is(':visible')){
	$disp.slideUp(400); // Ocultar el anterior si es visible

	// Si haces click sobre uno distinto al actual. Cargar los detalles
	if(pf !== 'pf3' && !$disp.find('div#display-' + pf).length){
		setTimeout(function(){
			$disp.load(dir);
			$disp.slideDown(600, 'swing');
		}, 400);
	}
}
else if(pf !== 'pf3'){
	$disp.load(dir, function(){
		$disp.slideDown(600, 'swing');
	});
}

Eso es el evento click, no le hagáis caso a lo de pf3 porque es de una capa que tengo provisional e ira fuera a poder ser pronto. Asi que seria eso sin las comprobaciones de esa capa.

El problema es que en IE no funciona, en el 9 le doy y se queda ahi tonto, para que me muestre algo tengo que abrir las herramientas de desarrollo (F12) y aparece del tirón, sin animación ni nada. En IE7 y 8 hace como si se abriera la capa pero no se ve nada, como si fuera una capa transparente del triple del tamaño real de esa capa.

Estoy harto de buscar y no encuentro nada. Algún fallo para IE7 como que la capa tiene que ser relative y añadir 'zoom: 1', pero que va. Indicar la altura de la capa, que es dinámica y no lo tiene. Pero nada, no hay manera. No se si es el .load u otra cosa o la animación.

¿Alguna sugerencia?

Gracias.

EDIT: edito para comentar que no es del load, o al menos no al 100%. He probado con una capa de contenido fijo y no hay animación, simplemente aparece y desaparece de golpe, como si fuera show y hide en vez de slideUp/Down. Eso si, hay un tiempo como de espera. Como si estuviese haciendo la animación pero no la hace.

[KsrZ]

probaste poniendo una posición negativa, y luego animarla animate() hacia abajo?
jquery tiene varias soluciones para un mismo efecto, navega un poco su documentación.
respecto a setTimeout, existe una función llamada delay(),casi seguro que puedes aplicarla ahí
en mi opinión, ese if - else lo ideal seria que lo metieras en una función, y la llamaras con un evento, aplicando $(this)
para interactuar con los efectos/eventos/funciones apuntadas a un mismo objeto

[LoGaNsF]

Lo primero gracias por la respuesta. Lo de la animación en IE ya lo solucione, estaba ya hasta las pelotas y resulto que era un polyfill que usaba para el box-sizing en IE (boxsizing.htc) y se rallaba, estaría mal. Total que revise la pagina y lo use con *behavior (antes no usaba el *) y perfecto. Me estaba volviendo loco, pero de casualidad le di a la depuración de IE y me mando al archivo y bueno, ya busque por ahí.

El delay también lo probé, lo he usado antes, pero aquí no me vale, con setTimeout consigo el efecto que quiero ya que delay es para hacer una espera entre animaciones.

Sobre lo otro te haré caso, a ver si ahora lo pruebo.

Gracias.

Un saludo.

EDIT: no se si con lo de meterlo en una funcion asociada a un evento te refieres a esto. Te pongo el codigo tal como lo tengo ahora:

Código:

$('.pf').on({
	'mouseover': function(){ // Mostrar descripcion
		$(this).find('.desc').stop(false, true).slideDown();
	},
	'mouseout': function(){ // Ocultar descripcion
		$(this).find('.desc').stop(false, true).slideUp();
	},
	'mostrar': function(){ // Mostrar los detalles del trabajo
		var $disp 	= $('#pf-display'),
			pf 	= $(this).attr('id'),
			dir 	= './portfolio.html #display-' + pf;

		if($disp.is(':visible')){
			$disp.slideUp(400); // Ocultar el anterior si es visible
			
			// Si haces click sobre uno distinto al actual. Cargar los detalles
			if(pf !== 'pf3' && !$disp.find('div#display-' + pf).length){
				setTimeout(function(){
					$disp.load(dir);
					$disp.slideDown(600, 'swing');
				}, 400);
			}
		}
		else if(pf !== 'pf3'){
			$disp.load(dir, function(){
				$disp.slideDown(600, 'swing');
			});
		}
	},
	'click': function(){
		$(this).trigger('mostrar');
	}
});

Lo otro que se me ocurre que puede ser es sacar esa función fuera y asociarla con ese evento, quizás te refieras a eso. Aunque no se cuanto mejoraría el código de hacerlo así, tal como lo tengo ahora no lo veo mal, la verdad. Toda recomendación es bienvenida, ya digo que es mi primer proyecto serio con jQuery y quiero aprender todo lo que pueda ya que tengo otro por el que voy a cobrar y este me esta viniendo bien para aprender.