Witam wszystkich użytkowników, na co dzień nie zajmuje się tworzeniem kodu w jQuery wiec nie jestem wyjadaczem w tej dziedzinie.

Moim zadaniem jest stworzenie slidera. Generalnie udało mi się osiągnąć ten cel ale nie do końca działa w zamierzony sposób. Mój cel przedstawia się w następujący sposób:

1. Z bazy pobieram wszystkie slide dodane za pomocą panelu administratora. - ok
2. Tworze odpowiednio ostylowaną strukturę html, przedstawiającą slider. - ok

// I teraz - za pomocą jQuery ożywiam martwy kod:

3. Nadaje odpowiedni parametr left wszystkim elementom slidera.
4. W Timerze zmieniam wartości left co określoną ilość sekund, co daje mi efekt slidera. Elementy przesuwają się w lewo. - ok

5. Pierwszy element slidera usuwam i przesuwam go na koniec struktury. Chce to wykonać zaraz po uzyskanej animacji / zaraz o pkt 4. - > i tutaj mam problem. Nie mogę uzyskać takiego efektu. Pierwszy element zmienia kolejność ale dopiero po drugim uruchomieniu się timera co daje kiepski efekt. Poza tym zamiast po prostu zniknąć i pojawić się na końcu, pierwszy element wykonuje dziwną animację przesunięcia, czego nie potrafie zrozumieć. -> całość znajduje się tutaj: http://beta.paintintheair.com/ przy odpowiednim pomniejszeniu strony (ctrl -), widać to o czym pisze. Za każdą pomoc z góry dziękuję.

Oto kod o którym mowa:

[HTML] pobierz, plaintext 
 
$(document).ready( function(){
 
	var ilosc = $('.s_img').length - 1;
	var left_v = 0; 
 
	$('.s_img').each(function() {
		$(this).css({left: left_v});
		left_v += 1002;
	});
 
	var timer = $.timer(function() {
 
		left_v = parseInt($('.s_img:eq(0)').css('left')) - 1002;
 
		$('.s_img').each(function(index) {
			$(this).animate({left: left_v}, {duration: 1000, queue: false});
			left_v += 1002;
		});
 
		$('.s_img:eq(0)').detach().insertAfter('.s_img:last');
	});
 
	timer.set({ time : 5000, autostart : true });
 
});
 
[HTML] pobierz, plaintext