✔ jQuery: Animation

[DerDaniel]

Hallo Leute,

mit jQuery möchte bei einem Säulendiagramm eine Animation einfügen:
Erst soll jede Säule aufblinken und dann die Höhe ändern. Hört sich einfach an, klappt aber nicht ganz...

<script type="text/javascript">
for (var i=1; i<=5; i++) {
	$("#bar_"+i).effect('pulsate',options,600,function(){
		$("#balken_"+i).animate({
			height: Math.round((balkenbreite/anzmax)*akt.anz)
		}, 1500);
	});
}
</script>

Alle drei Elemente pulsieren, nur der letzte wird anschließend kleiner. Nutze ich nur eine der beiden Funktionen, werden alle Elemente angepasst

Habt ihr vielleicht eine Idee?

€dit:
Wenn ich in der "inneren" animate()-Funktion das i per alert() ausgeben lasse, hat dieses IMMER den letzten i-wert. Warum?

 

[Avorin]

Ich vermute das das ein klassischer "ich bin javascript, ich mach schonmal weiter"-Fehler ist.
dein Callback wird erst nach 600ms ausgeführt. Da ist die Schleife schon weiter und hat i auf 5 gesetzt.
Bitte gib uns doch einen Link.

 

[DerDaniel]

Ich habe mal die Inhalte auf einer Testseite zusammengefasst - auch dort habe ich das selbe Problem

http://krickeld.de/test/jquery/balken.php

Zuerst werden die "Container" pulsiert (funktioniert), anschließend sollen die "inneren Container" wachsen (funktioniert nicht). Wenn ich nur eine der Funktionen nutze dann läuft alles prächtig...

Hinweis: Lasse das aktuelle i in die Firebug-Konsole laufen, komisches Ergebnis würde ich sagen...

 

[Paspirgilis]

Ich werf ma ne frage ein:
Warum machst du nich einfach $('.bar').animate() ?
Das fand ich imer ganz praktisch an JQuery das er sich alle passende Element selbst raussucht und ich keine For-Schleife mehr machen muss.

EDIT:
Und beim ganzen dann so..
$('.bar').effect('pulsate',{},600).animate( {height: 300}, 1500);

Is doch viel kürzer, oder hab ich was vergessen?

 

[DerDaniel]

Ich spreche nicht die Klasse "bar" komplett an weil ich nur spezielle Balken pulsieren lassen möchte, nicht alle

Was ich eigentlich möchte:

Ich habe die ID des Containers, also z.B. 2 für "bar_2" und "balken_2". Dieser eine soll nun pulsieren und dann wachsen, mehr nicht....

 

[Avorin]

möchtest du das alle Balken (nahezu)gleichzeitig blinken und dann ihre "Höhe" verändern? dann würde ich das so machen:

Demo:
http://jsbin.com/eyepu3

Code:

http://jsbin.com/eyepu3/edit

fadeIn und fadeOut habe ich in ermangelung des pulsate Effects(jQuery UI oder?) genutzt.

Der Trick ist das du $(this).children nutzt und nicht das child durch i ermittelst.

 

[Konstantin Denerz]

Hier noch eine Variante, die man auf der folgende Seite im Firebug testen kann :
http://krickeld.de/test/jquery/balken.php

$(".bar[id$=1],.bar[id$=4]").effect("pulsate",{times:3},300).find(".balken").animate({height:200},1500)

Hier kannst du den Selektor mit den ID's reingenerieren.


Gruß Konstantin

 

[DerDaniel]

@Konstantin

der Hinweis war schonmal super, lasse es nun nacheinander "abspielen".

$('#clickme').click(function() {
	$(".bar[id$=1],.bar[id$=4]").effect("pulsate",{times:3},300, function () {
		$(this).find(".balken").animate({height:200},1500)
	});
});

Jetzt habe ich allerdings noch ein problem: Die Boxen lasse ich nicht über eine for-schleife füllen sondern über ein JSON-Objekt. Also nutze ich eigentlich $("#bar_"+akt.id) wobei akt das Objekt ist. Wie kann ich nun auf akt in der inneren Funktion für das find zugreifen? Weil dort gibt es die wichtige akt.breite...

 

[Konstantin Denerz]

Wenn ich es richtig verstanden habe, dann willst du über die Menge die find zurück gibt iterieren.

Dazu kannst du die each-Funktion verwenden.

$(".bar[id$=1],.bar[id$=4]").effect("pulsate",{times:3},300, function () {
		$(this).find(".balken").each(function(index,element){$(element).animate({height:200},1500)})
	});

Gruß Konstantin

 

[DerDaniel]

nein das meinte ich definitiv nicht aus meinem richtigen script kommt dieses hier

/*
	balkenbreite = 300px
	anzmax = 30 (einheiten von 300)
	akt.anz = 10 (es sollen 10 von 30 angezeigt werden) 
	--> also wäre der balken 100px hoch
*/

var akt = myJSON.votedata[i];
$('#bar_'+akt.id).effect('pulsate',options,600,function() {
	$(this).find(".balken").animate({
		height: Math.round((balkenbreite/anzmax)*akt.anz)
	}, 1500);
});

im Object "akt" stehen die Informationen für die Animation, also erst pulsieren und dann Höhe errechnen und animieren. Ich kann aber innerhalb des find() nicht auf das Object "akt" zugreifen...

Ich sehe schon: JS ist immer noch nicht meine Welt