[HTML][JavaScript]Płynne przejście zdjęć Opcje

[Kloc]

Siemanko, jak mogę uzyskać efekt płynnego przejścia pomiędzy obrazkami w galerii na stronie, bo po wgraniu na serwer ma efekt "przycinania" się?
Za zmianę odpowiada js, po wywołaniu funkcji onclick="change()".

[HTML] pobierz, plaintext 
background = new Array();
background[0] = 'obrazek.jpg';
background[1] = 'obrazek2.jpg'';
background[2] = 'obrazek3.jpg'';
background[3] = 'obrazek4.jpg'';
 
function change() {
	val = document.getElementById('ksztalt6');
	value = val.getAttribute('data-value');
	if(value < background.length - 1){
		id = ++value
		document.getElementById("ksztalt6").setAttribute('data-value', id);
	}
 
	else{
		document.getElementById("ksztalt6").setAttribute('data-value', 0);
	}
}
 
function show() {
	val = document.getElementById('ksztalt6');
	id = val.getAttribute('data-value');
	document.getElementById("top").style.backgroundImage  = 'url('+background[id]+')';
	document.getElementById("top").style.transition  = 'background-image 2s 0s';
}
[HTML] pobierz, plaintext 

Ten post edytował Kloc 25.06.2014, 13:01:22

[Kloc]

Rozwiązałem to szybciej dodając opóźnienie w przejściu na 500ms. Mogłem sobie na to pozwolić bo to są backgroundy

[HTML] pobierz, plaintext 
document.getElementById("top").style.transition  = 'background-image 2s 500s';
[HTML] pobierz, plaintext 

Ale co innego z img. Jak można zrobić aby po kliknięciu img dostało opacity:0 i za chwilę przeskoczyło na 1 (przyciemniło się i za chwilę rozjaśniło) efekt na ok 2s
onclick wywołuje funkcję show()

[HTML] pobierz, plaintext 
 
function show(){
 
	document.getElementById("img1").style.opacity  = '0';
	document.getElementById("img1").src = img_gallery[id1];
        document.getElementById("img1").style.opacity  = '1';
 
}
[HTML] pobierz, plaintext 

w stylach mam zagnieżdżone

[HTML] pobierz, plaintext 
    #img1{
        transition:opacity 2s 0s;
    }
[HTML] pobierz, plaintext 

Efekt jest taki, że po kliknięciu nic się nie dzieje, a gdy usunę

[HTML] pobierz, plaintext 
document.getElementById("img1").style.opacity  = '1';
[HTML] pobierz, plaintext 

to znika i już się nie pojawia

Ten post edytował Kloc 25.06.2014, 18:29:07