Witajcie
Jestem nowy więc proszę mnie nie linczować za ewentualne niedopowiedzenia lub zły dział, wszystko podam/naprawię/odpokutuję

Otóż mam stronę w HTML w której to, Menu boczne i logo nie są przeładowywane po kliknięciu w link do podstrony. Przeładowywany jest tylko div id "tresc", z efektem fade out po kliknięciu w linka i fade in, gdy już się załaduje - dla całego kontenera (nawet dla jego tła).


Chciałbym dodatkowo uzyskać animację ładowania - w momencie, gdy kontener robi "fadeout" chciałbym, aby nie pozostawało na sekundę tylko puste pole, lecz w tym divie pośrodku wyświetlał się obrazek "img/loading.gif". Opcjonalnie może być jakieś tło, najlepiej ciemne i też "fade'owane" w obie strony.

Ktoś ma wiedzę, by sklecić taki skrypt i dokleić do już istniejącego kodu jquery? Jest tam kilka kodów w jednym tagu, ale nic nie koliduje więc powinno być ok i z tym.


Z góry dzięki za wszelką pomoc, ogromne mentalne PIWO dla każdego, kto pomoże

Pzdr.

--- EDIT ---

OK. Znalazłem takie oto cudo:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
    $("#spinner").bind("ajaxSend", function() {
        $(this).show("fast");
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
 
     });
[JAVASCRIPT] pobierz, plaintext 

Tylko problem jest w tym, że nie działa to tak, jakbym tego chciał.

1) przy przeładowywaniu strony jest animacja, ale jest transit (od lewego górnego rogu DIVa do całości wyznaczonego miejsca), obrazek się wyświetla, wygląda fajnie.
2) po tym wszystkim nastepuje "zerwanie" animacji, bez żadnego efektu, po prostu mignięcie (choć efekt ładowania powinien się z powrotem schować) potem krótka dziura, i fade in właściwej treści.

Czyli punkt wyjścia, bo to "mignięcie" psuje estetykę.

Natomiast sam DIV wygląda tak:

[HTML] pobierz, plaintext 
<div id="spinner" class="spinner" style="display:none; float:left; width:650px; height:auto; border-right:2px solid rgba(255, 255, 255, .7); background-color:rgba(0, 0, 0, .7);"><br /><br /><br /><br /><br /><br /><br />
    <center><img id="img-spinner" src="img/loading.gif" alt="Ładowanie....."/></center><br /><br /><br /><br /><br /><br /><br />
		<div id="stopka" style="background-color:black;"><center><font color="white">Projekt i wykonanie: ******** ? 2013 ? ***[at]gmail.com</font></center></div>
[HTML] pobierz, plaintext 

Czy da się jakoś tych efektów "wyjechania" z rogu pozbyć? Psują wszystko. I czy da się to jakoś upłynnić, aby nie było takiej "migającej dziury" pomiędzy ładowaniem a fadeIn właściwej treści?

Myślałem o wydłużeniu animacji, ale wsadzanie czasu w ms w nawiasy nic nie dawało. Może dokument niewidocznie, ale jednak, się przeładowuje co usuwa animację?