[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]

spróbuje z tym dodawaniem klas, a animacje już testowałem i wykonuje się ona tylko raz, a po ponownym kliknięciu już nie działa.

Z tymi klasami też coś nie działa :/ bo zawszę liczy się ostatnia dodana klasa.
Mógłby ktoś pokazać mniej więcej ja wykonać to przejście?

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

tu mam przykład- demo 6, ale nie potrafię go wdrożyć.
Musi to działać co kliknięcie i wywołanie funkcji, bez odświeżania strony.