Slider z 2 odcinka kursu JS - widoczne tło przy zmianie slajdu

pytanie zadane 15 listopada 2018 w JavaScript przez Ghost11 Początkujący (280 p.)

Cześć!

W drugim odcinku kursu JavaScript na Pasja Informatyki tworzymy slider. W trakcie zmiany slajdu najpierw zanika widoczny slajd, widać przez chwilę tło strony i dopiero pokazuje się kolejny slajd. Chciałbym wyeliminować ten "przestój" w postaci widoku tła strony, czyli zrobić tak, aby ten następny slajd zaczął się pokazywać już w trakcie zaniku poprzedniego. Jest to pewnie banalne, ale zaciąłem się na tym. Próbowałem już wszystkiego i nic. Zero pomysłu. Prosiłbym o pomoc jak to wykonać.

Z góry dzięki!

Kod slidera

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			body
			{
				background-color: #222222;
				font-size: 24px;
				color: white;
			}
		</style>
		
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">
		
			var numer = Math.floor(Math.random()*5)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			
			function ustawslajd(nrslajdu)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				numer = nrslajdu - 1;
				
				schowaj();
				setTimeout("zmienslajd()", 500);
				
			}
			
			function schowaj()
			{
				$("#slider").fadeOut(500);
			}
		
			function zmienslajd()
			{
				numer++; if (numer>5) numer=1;
				
				var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
				
				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
			
		</script>
		
	</head>
	<body onload="zmienslajd()">
	
		<span onclick="ustawslajd(1)" style="cursor:pointer;">[ 1 ]</span>
		<span onclick="ustawslajd(2)" style="cursor:pointer;">[ 2 ]</span>
		<span onclick="ustawslajd(3)" style="cursor:pointer;">[ 3 ]</span>
		<span onclick="ustawslajd(4)" style="cursor:pointer;">[ 4 ]</span>
		<span onclick="ustawslajd(5)" style="cursor:pointer;">[ 5 ]</span>
		
		<div id="slider"></div>
		
	</body>
</html>

1 odpowiedź

odpowiedź 15 listopada 2018 przez Grzegorz :> Dyskutant (8,050 p.)

W tego rodzaju sliderze wykonujesz operacje na jednym elemencie. Do uzyskania efektu, o którym mówisz musisz najłatwiej by było zrobić drugi div zawierający poprzednie zdjęcie i odpowiednio ustawić animacje przejścia. Gdy jeden znika to od razu pojawia sie drugi.