sequentiell animate nacheinander

[froemken]

Hallo zusammen,

einen Beitrag zu diesem Thema habe ich hier zwar schon gefunden, komm damit aber nicht weiter.

$('#categorySelect').change(function() {
	if($(this).val() != '') {
		/*$('div.productDownloadsRow:visible').fadeOut().removeClass('even');
		$('div.productDownloadsRow').filter('div[title=' + $(this).val() + ']').filter('div:even').addClass('even').end().fadeIn();*/
		$('div.productDownloadsRow:visible').animate({
			opacity:'toggle',
			height:'toggle'
		}, 'slow', 'linear', function() {
			$('div.productDownloadsRow').filter('div[title=' + $(this).val() + ']').filter('div:even').addClass('even').end().animate({opacity:'toggle',height:'toggle'}, {duration:'slow',queue:true});
		}).removeClass('even');
	} else {
		$('div.productDownloadsRow').filter('div:visible').animate({opacity:'toggle',height:'toggle'}, {duration:'slow',queue:true}).removeClass('even').end().filter('div:even').addClass('even').end().animate({opacity:'toggle',height:'toggle'}, {duration:'slow',queue:true});
	}
});

categorySelect ist eine SelectBox und wenn etwas ausgewählt wurde, dann sollen erstmal alle sichtbaren divs (productdownloadrow) ausgeblendet werden und DANACH sollen alle divs (productdownloadrow), die im Titel gleich sind, wie der Eintrag in der Selctbox wieder eingeblendet werden.

Sämtliche Beispiele im Internet zeigen dieses "nacheinander" immer mit nur EINEM div. Ich blende hier aber gleichzeitig ca 8 Elemente aus und blende danach 3 Elemente wieder ein.

Ich hab hier mal meinen Versuch Nummer xx gelistet mit dem Callback. Allerdings wird der Callback Dank meiner mehreren DIVs auch mehrfach aufgerufen. Fazit: Es wird nur ausgeblendet aber nicht mehr eingeblendet.

[froemken]

Bin einen Schritt weiter. Hab das Script so abgeändert, dass nur bei dem letzten Element in der Liste die Callback-Funktion aufgerufen wird.
Wenn allerdings wieder alle Elemente angezeigt werden sollen, dann springt die Liste ca. 8 mal rauf und runter. Heißt für mich: Im "else" ganz unten muss ich auch noch etwas rumtricksen, damit die Callback-Funktion nur beim letzten Element ausgeführt wird.

Naja...mit "do less" hat das mitlerweile nix mehr zu tun...

$('#categorySelect').change(function() {
	if($(this).val() != '') {
		var length = $('div.productDownloadsRow:visible').length;
		for(var i = 0; i < length; i++) {
			if((i + 1) == length) {
				$('div.productDownloadsRow:visible').eq(i).animate({
					opacity:'toggle',
					height:'toggle'
				}, 'slow', 'linear', function() {
					$('div.productDownloadsRow').filter('div[title=' + $('#categorySelect').val() + ']').filter('div:even').addClass('even').end().animate({opacity:'toggle',height:'toggle'}, {duration:'slow',queue:true});
				}).removeClass('even');

			} else {
				$('div.productDownloadsRow:visible').eq(i).animate({opacity:'toggle', height:'toggle'}, 'slow', 'linear').removeClass('even');
			}
		}
	} else {
		$('div.productDownloadsRow').animate({opacity:'toggle',height:'toggle'}, 'slow', 'linear', function() {
			$('div.productDownloadsRow').animate({opacity:'toggle',height:'toggle'}, 'slow', 'linear');
		}).removeClass('even').end().filter('div:even').addClass('even');
	}
});

[froemken]

Hab die Lösung nach langem Suchen endlich gefunden:

http://stackoverflow.com/questions/2...le-animations/

	$('#categorySelect').change(function() {
		if($(this).val() != '') {
			$('div.productDownloadsRow').fadeOut('slow', function() {
				if($('div.productDownloadsRow:animated').length === 1) {
					$('div.productDownloadsRow').removeClass('even').filter('div[title=' + $('#categorySelect').val() + ']').filter('div:even').addClass('even').end().fadeIn('slow');
				}
			});
		} else {
			$('div.productDownloadsRow').fadeOut('slow', function() {
				if($('div.productDownloadsRow:animated').length === 1) {
					$('div.productDownloadsRow').removeClass('even').filter('div:even').addClass('even').end().fadeIn('slow');
				}
			});
		}
	});