Jquery Płynna zmiana obrazków w logo.

Witam napisałem taki kod:

<script type="text/javascript">
	$(window).load(function () {
		$("#logo_photo").fadeIn(2000).delay(3000).fadeOut(2000);
		setInterval(rotator, 7500);
		
	});
	var a=0;
	function rotator() {
		if(a==0){
			$("#logo_photo").attr('src', 'style/sinopowers.png');
			a=1;
		}
		else if(a==1)
		{
			$("#logo_photo").attr('src', 'style/zr738m2n.png');
			a=0;
		}
		
		$("#logo_photo").fadeIn(2000).delay(3000).fadeOut(2000);
	};
	</script>

		<div id="glowny">
		<div id="top"> </div>
		<div id="srodek_g">
			<img id="logo_photo" style=" display: none ;float: left; margin-top: 10px; margin-left: 50px;" src="style/zr738m2n.png"> 	
		</div>
		<div id="srodek_t"> </div>
		
		<div id="srodek_d">
		</div>
		
		<div id="dol"> </div>
		</div>

I wszystko dobrze działa ale tylko przez jakiś czas. Potem zaczyna się wszystko rozwalać, tzn tak jakby padła synchronizacja. Obrazki zmieniają mi się nagle bez przejścia i potem znikają itp. Jak można to rozwiązać inaczej?

Dziwny sposób. Może po prostu dodaj callbacka do fadeOut? Będziesz miał pewność, że przed zakończeniem animacji nie wywołasz funkcji jeszcze raz, co zapewne jest przyczyną tego chaosu. jeżeli chcesz te 500ms odstępu to w callbacku zrób setTimeout

A czy ktoś potrafi mi powiedzieć dlaczego jak dodałem do:

$("#logo_photo, #nazwa_w_logo").fadeIn(2000).delay(3000).fadeOut(2000, function (){

Dwa elementy to mi już się nie zmieniają obrazki ani opis. Tak jakby wchodził zawsze w tego else if(a==1){}

	<script type="text/javascript">
		$(window).load(function () {
                setInterval(rotator, 7500);
                rotator();
        });
        
        var a=0;
        
        function rotator() {
			$("#logo_photo, #nazwa_w_logo").fadeIn(2000).delay(3000).fadeOut(2000, function (){
				if(a==0)
				{
					$("#logo_photo").attr('src', 'style/sinopowers.png');
					$("#nazwa_w_logo").html("SinoPower-D");
					a=1;
				}
				else if(a==1)
				{
					$("#logo_photo").attr('src', 'style/zr738m2n.png');
					$("#nazwa_w_logo").html(a);
					a=0;
				}
			});
        };	
	</script>

Ponieważ jeżeli podasz dwa selektory to callback wykona Ci się dwa razy - po zakończeniu obu animacji. Jeden callback wykonuje się milisekundy przed drugim, jeden zmienia a na zero, drugi natychmiast na 1. I potem znowu.
Ale ten Twój kod mnie przeraża. Tego nie da się w przyszłości wykorzystać już, jest nierozszerzalne i w ogóle smutny kawałek kodu :(

No to mógłbyś od razu podpowiedzieć jak inaczej to rozwiązać ;) Jestem świeży w jquery i js więc musisz mi wybaczyć :P.
Bo nie rozumiem w jakim sensie nie da się go potem rozszerzać.

Bo na razie jest tak i też mi się synchro po jakimś czasie chrzani: http://www.mati1988k.phpnet.us/

Jak to "naprawić" - tak na szybko, żeby działało - to chyba wiesz.

A jak to rozwiązać. Hm. Coś takiego powinieneś zrobić w formie pluginu do jQuery, żeby potem wywołanie tego przypominało coś takiego:

$('#obrazki_w_logo').matiSlider({fade: 2000, delay: 3000});

A w kodzie html żeby było coś np takiego:

<ul id="obrazki_w_logo">
  <li><img src="/sciezka/do/obrazka1.jpg" alt="tytuł do obrazka" /></li>
  <li><img src="/sciezka/do/obrazka2.jpg" alt="inny tytuł" /></li>
  <li><img src="/sciezka/do/obrazka3.jpg" alt="itd" /></li>
</ul>

Twój plugin zapisze sobie dane z tych elementów w HTML, ich ilość, utworzy jakiegośtam diva z obrazkiem i tytułem, usunie wyżej napisany kod html (bo nie chcesz go wyświetlać raczej, choć temu pewnie i tak nadałbyś display: none), ew usunie coś, co pojawia się zamiast slidera w przypadku gdy javascript jest niedostępny. Potem używając dodatkowych parametrów rozpocznie animację.

Takie wywołanie JS będziesz mógł użyć też na wielu elementach z różnymi parametrami - tak jak każdy inny slider jQuery możesz wywołać na stronie kilkukrotnie.

Przewaga takiego rozwiązania:

• Lepsze SEO (w Twoim przykładzie może to nie ma dużego znaczenia, ale w sliderach często jest tekst, który chcielibyśmy, żeby wyszukiwarki indeksowały - nie zaindeksują go zdefiniowanego w pliku JS)
• Wygoda - lepiej dopisać jedno <li> czy zmienić liczbę (czas fade'ów) w wywołaniu niż dopisywać kolejne else ify z kolejnymi numerami dla zmiennej a i generalnie zaśmiecać kod powtórzeniami
• Możliwość łatwego ponownego użycia
• To wcale nie jest takie trudne jak się wydaje napisać coś takiego porządnie ;)

Wady:

• Jak się ni w ząb nic nie kuma, to robienie miliona else ifów wydaje się łatwiejsze :P

PS. Ja sam nie robię tego typu rzeczy w formie pluginów do jQuery, tylko trochę inaczej, ale główna idea jest ta sama - ma być łatwy do zrozumienia, rozszerzalny i łatwy do ponownego użycia kod. Jak znajdę trochę czasu (koło niedzieli pewnie) to zapostuję tu jakiś przykład z dokładnym opisem jeżeli jesteś zainteresowany.

PS. Ja sam nie robię tego typu rzeczy w formie pluginów do jQuery, tylko trochę inaczej, ale główna idea jest ta sama - ma być łatwy do zrozumienia, rozszerzalny i łatwy do ponownego użycia kod. Jak znajdę trochę czasu (koło niedzieli pewnie) to zapostuję tu jakiś przykład z dokładnym opisem jeżeli jesteś zainteresowany.

Jak najbardziej :). Ja spróbuje coś sam wyskrobać i potem to porównam z tym co Ty zrobiłeś.

http://www.mati1988k.phpnet.us/
Oczywiście w IE mi się rozwala ale to wina półprzeźroczystości obrazków. Da się to jakoś rozwiązać?

To błąd występujący w IE7 i IE8 (IE6 w ogóle nie obsługuje przeźroczystości 8. bitowej). Aby temu zapobiec musisz przeźroczystość stosować NIE do elementu <img /> tylko jego elementu nadrzędnego. Czyli opakuj ten obrazek w jakiś kontener (div, p, span, cokolwiek) - i na tym kontenerze stosuj efekt fade. Pod IE6 oczywiście nie będzie działać i tak, ale tym się nie przejmuj oczywiście ;)

Zrobiłem tak i dalej to samo:

	<script type="text/javascript">
		$(window).load(function () {
                setInterval(rotator, 7500);
                rotator();
        });
        
        var a=0;
        
        function rotator() {
        	$("#nazwa_w_logo").fadeIn(2000).delay(3000).fadeOut(2000);
			$("#logo_photo").fadeIn(2000).delay(3000).fadeOut(2000, function (){
				if(a==0)
				{
					$("#zdjecie_sprzetu_logo").attr('src', 'style/sinopowers.png');
					$("#nazwa_w_logo").html("SinoPower-D");
					a=1;
				}
				else if(a==1)
				{
					$("#zdjecie_sprzetu_logo").attr('src', 'style/zr738m2n.png');
					$("#nazwa_w_logo").html("SN-50F6");
					a=0;
				}
			});
        };	
	</script>

<div id="logo_photo" style="display: none; float: right; margin-top: 10px; margin-right: 20px;"><img id="zdjecie_sprzetu_logo" src="style/zr738m2n.png"/></div>

Hm. W takim razie coś jeszcze trzeba było zrobić. Tylko nie pamiętam co :/ Nieszczególnie też pamiętam w którym projekcie potrzebowałem przenikających png, więc nie wiem gdzie tego szukać. Googluj.

Na szybko znalazłem tylko tyle, żeby elementowi nadrzędnemu nadać tło (przez background: #ffffff - tylko kolor zmień - Twój layout na szczęście umożliwia coś takiego), oraz nadać mu styl zoom: 1.
Wykonane projekty szybko wyrzucam z pamięci, a w dodatku trochę mam zamieszanie ostatnio i za cholerę nie mogę sobie przypomnieć gdzie to robiłem :/

Edit: swoją drogą - skoro masz jednokolorowe tło, to może zrób te pngi jpegami? ;) Ew. png bez 8. bitowego kanału alpha.
Edit2: Sam fakt, że to są zdjęcia powinien skłonić Cię do wyboru jpg, jeżeli tylko nie ma znaczenia tło.

Pomyślałem też, że mógłbym zrobić diva nad obrazkiem w kolorze tła i go fadeinować i fadeoutować.
Ale za nic w IE nie moge diva nad obrazek wrzucić :D. Może i masz rację zrobię jpg z tłem jak na stronie :).

A czemu takie coś nie działa:

$("#zdjecie_sprzetu_logo").fadeIn(2000).delay(3000, function(){alert("alert");}).fadeOut(2000, function (){jakas funkcja});

Wykonuje sie tylko do momentu alerta, fadeOut już się nie wykonuje.

Ogólnie to delay jest dziwne i raczej bym się oduczył jego stosowania.
Nauczyłbym się za to czytania dokumentacji ;) - delay nie ma callbacka, po to stosujesz delay, żeby fadeOut się wykonało po nim, więc po co callback (tj zapewne chcesz wykonać inne akcje, tutaj wychodzi pewnie niedoskonałość używania tego czegoś)?

Zapomniałem sobie w ogóle o tym topiku, ustawię sobie przypomnienie i wieczorkiem Ci napiszę to, co obiecałem ;)

Zrobiłem to tak:

<ul id="obrazki_w_logo" style="list-style-type: none">
	<li><img src="style/zr738m2n.jpg" alt="SN-50F6" /></li>
	<li style="display: none" ><img src="style/sinopowers.jpg" alt="SinoPower-D" /></li>
	<li style="display: none" ><img src="style/SN50C6T.jpg" alt="SN-50C6T" /></li>
</ul>

<script type="text/javascript">
	$(window).load(function () {
            setInterval(rotator, 7500);
    });
    
    var a=0;
    
    function rotator() {
    	$("p#nazwa_w_logo").fadeOut(3000);
    	$("ul#obrazki_w_logo li:visible:first").fadeOut(3000, function(){
    		        		
    		if($(this).next().length)
    		{
    			$(this).next().fadeIn(3000);  
    			var nazwa = $(this).next().children("img").attr('alt');      		    
    		}
    		else
    		{
    			$("ul#obrazki_w_logo li:hidden:first").fadeIn(3000);
    			var nazwa = $("ul#obrazki_w_logo li:hidden:first").children("img").attr('alt');
    		}
    		
    		$("p#nazwa_w_logo").html(nazwa);
    		$("p#nazwa_w_logo").fadeIn(3000);
    	});			
   };	
</script>

I wydaje się dobrze działać ;)