Efekt zanikania zdjęcia w divie

0

Cześć,
chcę zrobić efekt zanikania zdjęcia. O co chodzi. Taki jakby slider-box. Co kilka sekund zmienia się zdjęcie z efektem fadeOut. Zrobiłem już takie efekt i znikanie jednakże mam problem z dodaniem kolejnego zdjęcia do slidera.

Kod jQuery:

$(document).ready(function () {
   setInterval(function() {
      $(".header").fadeOut('slow')
      $(".header").fadeIn(500);
   }, 5000);
});

Kod HTML:

<div class="header">
    <img src="img/foto1.png"/>
</div>

Gdy dodam tak:

<code class="html"><div class="header">
    <img src="img/foto1.png"/>
    <img src="img/foto2.png"/>
</div>

To pojawiają się 2 zdjęcia, które "mrugają", czyli zanikają a żadne się nie zmienia na następne.
Pomoże mi ktoś rozwiązać ten problem?

0

.header > img:first z tym pokombinuj.

0

Musisz pamiętać, że funkcje typu fadeOut nie wstrzymują wkonania kodu do czasu wykonania "siebie", tzn. same z siebie tego nie robią, bo możesz ustawić callback. Oznacza to tyle, że fadeIn nie czeka na wykonanie się fadeOut, a jak to zapętlisz, to w konsekwencji wydaje się, że tylko coś tam mryga. Spróbuj tak:

initSlide();

function initSlide() {
    $('#pic1').fadeIn(1000).delay(2000).fadeOut(1000, function() {
        $('#pic2').fadeIn(1000).delay(2000).fadeOut(1000, function() {
            initSlide();
        });
    });
}

Demo:
http://jsfiddle.net/27uy8/160/

Trochę to na sztywno zrobione, ale chciałem się trzymać Twojego pomysłu.

Polecam zapoznać się z tym linkiem (http://snook.ca/archives/javascript/simplest-jquery-slideshow), tutaj masz wszystko super wytłumaczone, a kodu dosłownie 4 linijki.

0

Podałeś mi przykład, który idealnie pasuje do mojego pomysłu. Jednakże mam dziwny problem. Próbuję to przekopiować a pomimo tego nie działa. Nic się nie wyświetla. W demo, które podałeś działa, natomiast na stronie już nie. Dlaczego?

<!DOCTYPE html>

<html lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<style>

	#pics div {
	    position:absolute;
	    display: none;
	}

</style>
<script>

	runslide();

	function runslide() {
	    $('#pic1').fadeIn(1000).delay(2000).fadeOut(1000, function() {
	        $('#pic2').fadeIn(1000).delay(2000).fadeOut(1000, function() {
	            runslide();
	        });
	    });
	}

</script>

<body>
    <div id="pics">
    	<div id="pic1">obrazek 1</div>
    	<div id="pic2">obrazek 2</div>
	</div>
</body>
</html>

Wiesz może dlaczego tak się dzieje?

dodanie znaczników <code class="css"> i <code class="jquery"> - @furious programming

0

No ale co mówi konsola...

0

Konsola w chromie nic nie pokazuje, natomiast w Firefoxie:

Kodowanie znaków dokumentu HTML nie zostało zadeklarowane. Podczas wyświetlania tego dokumentu w niektórych konfiguracjach przeglądarki niektóre znaki spoza zakresu US-ASCII (o ile występują) mogą wyglądać nieprawidłowo. Kodowanie znaków strony musi być zadeklarowane w dokumencie lub w protokole przesyłania.

Więc dodałem:

<meta charset="utf-8"/>

Błąd z firefoxa zniknął ale efektu nadal nie ma. Nie rozumiem tego, bo zawsze wszystko się wyświetlało.

0

Więc włącz debugger i sprawdź co się tam dzieje.

0

firebug.png

Nic nie wyświetla się w konsoli. Nie wiem dalej co z tym zrobić.

1

http://jsfiddle.net/27uy8/162/

kod javascriptu jest wywoływany za wcześnie, powinien być wykonany po załadowaniu strony, poza tym masz tagi script i style pomiędzy tagami head i body, nie jest to do końca poprawne

1

Musisz dodać:

$(document).ready(function({ 
tutaj swój kod 
});

Skrypty dołączaj na samym dole dokumentu, przeglądarka czyta od góry do dołu, więc jak napotyka init to odpala Twoją funkcję, zanim DOM jest gotowy. Twój skrypt chyba wgl ignoruje, bo znajduje się w jakiejś czarnej dziurze pomiędzy tagami </head>, a <body> :D

Spróbuj tak:

<!DOCTYPE html>

<html lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head> 
	<!-- style do head -->
	<style>
		#pics div {
			position:absolute;
			display: none;
		}
	</style>
</head>
<body>
	<div id="pics">
		<div id="pic1">obrazek 1</div>
		<div id="pic2">obrazek 2</div>
	</div>

	<!-- skrypty na sam dół body -->
	<!--najpierw jquery-->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(document).ready(function() {
			runslide();
		});
		function runslide() {
			$('#pic1').fadeIn(1000).delay(2000).fadeOut(1000, function() {
				$('#pic2').fadeIn(1000).delay(2000).fadeOut(1000, function() {
					runslide();
				});
			});
		}
	</script>

</body>
</html>

Wszystkie funkcje dla porządku możesz wrzucić do osobnego pliku skrypty.js i go wrzucić za jquery, ale przed inicjalizacją :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1