añadir transicion a la carga con xmlhttprequest

[TROQUELADO]

hola amigos,

Tengo una duda sobre transiciones y transparencias en una pagina que estoy haciendo. La pagina consiste en un div estatico con una foto y un link de informacion. El link al pulsarlo me carga un div con fondo blanco encima del div de la imagen, y en el hay escrita una información. Bien, esto lo hago con XMLHttpRequest, pero me gustaria saber si seria posible hacer lo mismo pero con un efecto de transicion, de transparente a opaco.

Si alguien pudiera orientarme a algun tutorial sobre esto, o algun tutorial donde se explique este aspecto usando prototype y scriptaculous, ya que tambien me gustaria aprender un poco de estas librerias.

Muchisimas gracias de antemano!!!

saludos.

[GatorV]

Tema trasladado a Frameworks.

[Eleazan]

Buenas, yo uso el siguiente script (js + jQuery)

Código:

// Documento JavaScript
// Esta función cargará las paginas
function llamarasincronofx (url, id_contenedor) {
	//Seguramente, un id_contenedor valdría xD
	$('#contenido').fadeOut('normal');	
	//alert('Url:'+url+' y contenedor:'+id_contenedor+' Ahora lanzamos el timeOut');
	//setTimeout('llamarasincrono()',500,url, id_contenedor);
	setTimeout("llamarasincrono('"+url+"','"+id_contenedor+"')",500);
}

function llamarasincrono (url, id_contenedor)
{   
	clearInterval();
    var pagina_requerida = false;
    if(!id_contenedor) id_contenedor='contenido';
	
	if (window.XMLHttpRequest)
    { 
        // Si es Mozilla, Safari etc
        pagina_requerida = new XMLHttpRequest ();
		//alert('Selected XMLHttpRequest');
		
    }
    else  if (window.ActiveXObject)
    {  	
        // pero si es IE
        try 
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
			//alert('Selected Msxml2.XMLHTTP');
        }
        catch (e)
        {
            // en caso que sea una versión antigua
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
				//alert('Selected Microsoft.XMLHTTP');
            }
            catch (e)
            {
            }
        }
    } 
	else {
    return false;
	//alert('Aqui no entro');
	}
	
    pagina_requerida.onreadystatechange = function ()
    {
        // función de respuesta 
		//alert('Arrancamos cargarpaginafx con estos datos: id:'+id_contenedor+'y url:'+url);
        cargarpaginafx (pagina_requerida, id_contenedor);
    }
	
		 
    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
    pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpaginafx (pagina_requerida, id_contenedor)
{	
	 
    if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1)) {
    document.getElementById(id_contenedor).innerHTML = pagina_requerida.responseText;
	//No me acuerdo pq puse esto
	$("#main-content").css("background-color","#191512");
	//Seguramente, un id_contenedor valdría xD
	$('#contenido').fadeIn('normal');
	clicks();
	}

}

Sí, tiene fallitos y tal, pero espero que te sirva de orientación. Hay un par de $('#contenido') que tendrian que ser con id_contenedor pero......... ahora mismo, me da pereza cambiarlo!

Espero que te valga, no tengo mucho tiempo para explicarlo, adaptalo, y suerte! :)

PD: para usarlo: onClick="javascript:llamarasincronofx('soluciones. html', 'contenido');"

EDIT: la base del script fué un tutorial que encontré de AJAX, para cargar páginas (no recuerdo de dónde era, lo siento). La parte de FX la he añadido yo