Witam serdecznie

Piszę fragment kodu odpowiedzialny za poruszanie czterema obrazkami. Sprawa dokładnie wygląda tak: obrazek się pojawia, dzięki animate przesuwa na koniec jednego diva, zanika, pojawia w kolejnym, przesuwa na jego koniec, zanika ponownie, pojawia się w ostatnim div, gdzie przesuwa się na jego koniec i tam zostaje. A potem kolejny, kolejny i kolejny. Nie jest to trudny kod, ale aby wszytko działało w odpowiedniej kolejności używam callbacków. Przy jednym obrazku to nie problem, ale przy czterech ten kod zaczyna robić się zawiły, a to nie jest prawidłowe.

Zastanawiam się więc jak w jQuery zachowując kolejność wykonywanego kodu uniknąć dużej ilości callbacków?

Promise / jQuery.Deferred pozwalają pisać w ten sposób:

[HTML] pobierz, plaintext 
  anim1()
    .then(anim2)
    .then(anim3)
[HTML] pobierz, plaintext 

Nie jest to problem samego jquery, tylko tego w jaki sposób działa javascript ogólnie. A działa asynchronicznie i ty chcesz żeby działał asynchronicznie, żeby jedna akcja drugiej nie blokowała. Dlatego też zostały wprowadzone obietnice (promise) oraz od całkiem niedawna generatory i ich async/await odpowiedniki. Dzięki czemu możesz tworzyć kod który wygląda jak synchroniczny, a jest asynchroniczny. Od jakiegoś czasu używam takiego podejścia (raczej głównie po stronie backendu) i jest to ogromny krok do przodu i już nigdy nie chcę używać callback'ów czy then'ów.

Czy ta animacja powoduje modyfikacje drzewa DOM? Jeśli nie, tj. element pozostaje w tym samym miejscu w strukturze DOM podczas całej animacji, to może użyc animacje w CSS?

promis powinno być ok(wydawało mi się że jest przestarzały), ale po całym dniu studiowania nadal nie mogę go poprawnie użyć z moim kodem.

[HTML] pobierz, plaintext 
<script>
 
$(document).ready(function() {
 
			var right=$('.a #first').width();
			var height=$('.a #first').height();
 
 
$('.a #first').show('slow',function(){
					$('.a #first').animate({right:0},500,
							function(){$('.a #first').animate({width:0,height:height},500,
									function(){$('.b #first').css({'display':'block','height':height}).animate({width:right,height:height},500,
											function(){$('.b #first').animate({right:0},500,
													function(){$('.b #first').animate({width:0,height:height},500,
															function(){$('.c #first').css({'display':'block','height':height}).animate({width:right,height:height},500,
																	function(){$('.c #first').animate({right:0},500)})
															})
														})
											})
							})
			})
	});
 
$('.a #first').promise().done(function(){
		$('.a #sec').show('slow',function(){
					$('.a #sec').animate({right:0},500,
							function(){$('.a #sec').animate({width:0,height:height},500,
									function(){$('.b #sec').css({'display':'block','height':height}).animate({width:right,height:height},500,
											function(){$('.b #sec').animate({right:0},500,
													function(){$('.b #sec').animate({width:0,height:height},500,
															function(){$('.c #sec').css({'display':'block','height':height}).animate({width:right,height:height},500,
																	function(){$('.c #sec').animate({right:right},500)})
															})
														})
											})
							})
			})
	})
});
 
$('.a #sec').promise().done(function(){
		$('.a #third').show('slow',function(){
					$('.a #third').animate({right:0},500,
							function(){$('.a #third').animate({width:0,height:height},500,
									function(){$('.b #third').css({'display':'block','height':height}).animate({width:right,height:height},500,
											function(){$('.b #third').animate({right:0},500,
													function(){$('.b #third').animate({width:0,height:height},500,
															function(){$('.c #third').css({'display':'block','height':height}).animate({width:right,height:height},500,
																	function(){$('.c #third').animate({right:2*right},500)})
															})
														})
											})
							})
			})
	})
});
 
$( '.a #third').promise().done(function(){
		$('.a #fourth').show('slow',function(){
					$('.a #fourth').animate({right:0},500,
							function(){$('.a #fourth').animate({width:0,height:height},500,
									function(){$('.b #fourth').css({'display':'block','height':height}).animate({width:right,height:height},500,
											function(){$('.b #fourth').animate({right:0},500,
													function(){$('.b #fourth').animate({width:0,height:height},500,
															function(){$('.c #fourth').css({'display':'block','height':height}).animate({width:right,height:height},500,
																	function(){$('.c #fourth').animate({right:2*right},500)})
															})
														})
											})
							})
			})
	})
});
})
 
</script>
 
[HTML] pobierz, plaintext 

W tym przypadku pierwsza i druga część kodu działa poprawnie, asynchronicznie, ale potem zaczynają się problemy. Dwa ostatnie etapy niestety już wyświetlają się razem. Przy próbach użycia then w ogóle cały czas były błędy. Przy podzieleniu tego na cztery funkcje i też był problem przy trzecim i czwartym etapie. Może podpowiecie coś jeszcze.