podmiana klas w animacji

Witam, posiadam obrazki w dwóch klasach "a1" i "a2", chcę je animować i po zatrzymaniu klasy "a1", podmienić ją na "a2" i dalej animować. Próbowałem podmieniać klasę funkcją

 $(this).removeClass('a1').addClass('a2'); 

zamienia klasę na "a2", ale dalej animuje klasę "a1" zamiast "a2". Mam taki kod:

echo"<img src='...' class='a1' />
<img src='...' class='a2' />
				";

 	$('.a1').load(function() {
			  $('.a1').animate({
			
				left: '+=30'
			
			  }, 500,'linear');
			  
			$(this).removeClass('a1').addClass('a2');
			 $(this).animate({
				left: '+=30'
				
			  }, 500,'linear');
		
			});

Co robi Twój kod:

$('.a1').load(function() { // po załadowania jakiegokolwiek obrazka z klasą "a1" (zostanie wykonane kilkukrotnie jeżeli obrazków jest kilka)
    $('.a1').animate({ // przesuń WSZYSTKIE obrazki z klasą a1 (te niezaładowane też)
        left: '+=30'
    }, 500,'linear');
    $(this).removeClass('a1').addClass('a2'); // załadowanemu obrazkowi (this) usuń klasę a1 i dodaj a2
    $(this).animate({ // załadowany obrazek (this) ponownie przesuń
        left: '+=30'
    }, 500,'linear');
});

Natomiast Twojej opowieści o klasach nie rozumiem.

Napisz jaki efekt chcesz uzyskać, bo póki co tyle wiem, że to, co próbujesz robić to bierzesz się za to od złej strony.

Dobra to inaczej. Mam jeden obrazek w "a1" i inny obrazek w "a2", chcę najpierw przesuwać "a1", po przesunięciu zamienić obrazek z "a1" na obrazek z "a2" i dalej przesuwać "a2" od tego miejsca gdzie się zatrzymał "a1". Rzecz jeszcze w tym, by "a2" pojawiało się od momentu podmiany obrazków.

a potrzebujesz w ogóle tego a2? wykorzystujesz to do czegoś?
bo logika podpowiada - obrazek z daną klasą, po załadowaniu (jeden, nie wszystkie) przesunąć, a po zakończeniu animacji przesunąć gdzieś indziej. nie ma tu potrzeby stosowania klas

Tak wykorzystuje obrazek z a2, gdy a1 się przesunie. To można też bez klas, chcę uzyskać taki efekt: Załadowanie obrazka nr1, przesunięcie go, schowanie/zniknięcie, usunięcie obrazka nr1 tak, żeby go nie było widać, a w to miejsce gdzie zatrzymał się obrazek nr1 wstawienie obrazka nr2 na tą pozycję i przesunięcie go. Obrazek nr2 ma się ładować tylko gdy ten nr1 się zatrzyma i zniknie, nie możesz być on widoczny gdy zaczyna się przesuwać obrazek nr1.

Pomoże ktoś?

Rozwiąż to tak, że po zakończeniu pierwszej animacji obrazkowi zmieniasz atrybut src i dalej do animujesz.

http://jsfiddle.net/6cHRS/18/

Działa, dzięki :).