[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

[PrinceOfPersia]

lepiej zrób w CSS klasy, a potem dodawaj/zeruj klasy:

[CSS] pobierz, plaintext 
.klasa1 {
.....
}
[CSS] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
element.className = "klasa1"
...
element.className = "klasa2"
[JAVASCRIPT] 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

możesz zamiast z tranzycji skorzystać z animacji CSS3 (google: animations CSS3), tam możesz ustawić ileś klatek kluczowych, zamiast tylko dwóch (jak przy transition)