JS/Jquerry banalny problem, ale nie dla mnie :/

Question

Witam,

znalazłem sobie na pewnej stronie taki krótki skrypt, który to umożliwia wczytywanie podstron bez odświeżania. Mam taki problem, bo chciałbym, żeby działało to mniej więcej tak.

Po kliknięciu na linka odegrana jest animacja .HIDE(), do zmiennej wczytana jest nazwa podstrony, kiedy animacja się zakończy wczytana zostanie podstrona do diva#content, następnie zostanie odegrana animacja .SHOW() divów z podstrony. No i nie działa. Wszystko kończy się na tym, że zostaje pobrana wartość, animacja HIDE jest odegrana i dupa... nie wiem co dalej/

Jestem początkujący i to sobie postawiłem jako wyzwanie w ramach ćwiczeń :P

Oto fragment kodu:

var podstrona = "";

$(document).ready(function() { 


	$("div.left").delay( 200 ).show('slide', { direction: "left" }, 200);
	$("div.right").delay( 200 ).show('slide', { direction: "right" }, 200); 

		
$('ul#menu li a.opcja').click(function() {

	podstrona = $(this).attr('href');
	console.log(podstrona);
	
	$("div.left").delay( 200).hide('slide', { direction: "left" }, 200);
	$("div.right").delay(200).hide('slide', { direction: "right" }, 200);

	return false;


   
   });
 
 while ($("div.left").is(":hidden") && $("div.right").is(":hidden")) {

 	$('div#container').load('pages/'+podstrona);

 }

 });

Z góry dzięki za zainteresowanie.

 

Answer 1

Po pierwsze, polecę poczytam https://kornel.ski/ramki i http://diveinto.html5doctor.com/history.html

Po drugie: polecam sprawdzić co to callbacki ;)

$( '#content' ).hide( function() {
    robimyCosDalej();
} );

 

Comments

Wiem, że to zło, Ale chciałem, żeby animacja wykonywała się bez ponownego wczytywania tła. Callback powoduje, że animacja wyskakuje jak z petardy(nie odgrywane jest show).

Jest jakaś alternatywna metoda, żeby tło było wczytane i nie odświeżane przy zmianie podstron?

---

Hm… Strzałki (→) oznaczają callbacki:

Ukrycie → wczytanie nowej strony → pokazanie

Nie powinno być nic urywane.