[jQuery] .animate() richtig nutzen?

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich möchte folgendes mit jQuery erreichen:
Ich habe mit position:absolute 10 Elemente zufällig relativ zum <body> positioniert.

Wenn ich jetzt z.B. das erste Element anklicke, soll dies von der aktuellen Position 120px nach unten und 50px nach rechts verschoben werden.

Nun klicke ich auch noch auf ein weiteres Element. Dies soll von der aktuellen Position 40px nach links und 200px nach oben verschoben werden. Gleichzeitig soll jetzt aber das erste Element wieder an seine Ursprungsposition verschoben werden. Es gibts quasi immer nur 1 aktives Element.

Dazu habe ich auch schon einen Code, der noch nicht optimal ist.
Im Chrome und im IE funktioniert es sogar. Im Firefox sind die positionen falsch, die ich so erhalte:
HTML: 
// Save current position
				pos_top = $(this).css('top');
				pos_right = $(this).css('right');
				pos_bottom = $(this).css('bottom');
				pos_left = $(this).css('left');


Mein Code scheint auch recht suboptimal zu sein. Geht das nicht besser?
Und wie kann ich es verhindern, dass eine Animation startet, obwohl eine Andere noch nicht beendet wurde?

Freue mich wie immer über Hilfe! :-)


HTML: 
	// Move presents
	// -------------------------
	$('.domove').each(function(){

		// Reset positions
		pos_top = '';
		pos_right = '';
		pos_bottom = '';
		pos_left = '';
				
		$(this).click(function (){
			
			// Only if not active
			if(!$(this).hasClass('active')){
	
				// Move to old position
				$('.domove.active').stop().animate({
					'top': pos_top,
					'right': pos_right,
					'bottom': pos_bottom,
					'left': pos_left
				}, 250, function(){
					$(this).removeClass('active');
				});
				
				// Set active
				$(this).addClass('active');
				
				// Save current position
				pos_top = $(this).css('top');
				pos_right = $(this).css('right');
				pos_bottom = $(this).css('bottom');
				pos_left = $(this).css('left');
	
			}
		});
	});
	
	
	$('.present-1').click(function (){
		$(this).stop().animate({
			'top':'-102px'
		}, 250);
	});

	$('.present-2').click(function (){
		$(this).stop().animate({
			'top':'-46px',
			'right':'20px'
		}, 250);
	});

	$('.present-3').click(function (){
		$(this).stop().animate({
			'top':'100px',
			'right':'-86px'
		}, 250);
	});


	$('.present-4').click(function (){
		....
	});	


        $('.present-5').click(function (){
		....
	});

        usw.
 
Eine Frage.
Wieso benutzt du hier die Funktion .stop()? Ist das nicht widersprüchlich. Du willst doch dass ein Elemen beim Anklicken seine CSS Koordinaten ändert oder nicht?


Code: 
	$('.present-1').click(function (){
		$(this).stop().animate({
			'top':'-102px'
		}, 250);
	});

Ich würde vorschlagen, dass du das .stop() rausnimmst.
Der Aufbau sieht ja wie folgt aus:

Code: 
.animate( properties [, duration ] [, easing ] [, complete ] )

der letzte Parameter "complete" bietet dir die Möglichkeit eine weitere Funktion zu nennen die erst nach dem Abschließen der ersten Funktion ausgefuehrt wird.

Beispiel:

Code: 
$('#test').click(function(){$(this).animate('top':'-102px', 250, function(){ weitere Funktion 
});
    });

Ansonsten könntest du eine if-else-Schleife aufbauen.

Code: 
if($('.present-1')) {
  // Code ausführen
} if($('.present-2')) {
  // Code2 ausführen
} usw.


Hoffe ich konnte dir damit auf die Sprünge helfen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück