✔ jQuery: Animation

[Konstantin Denerz]

Naja du willst die Animation für jeden Balken ausführen und die jede Animation muss einen berechneten Wert (Höhe) haben, oder?

Hier der Pseudo-Code:

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

 

[DerDaniel]

auch nicht, ich weiß gar nicht wie ich es beschreiben soll...

ich kann INNERHALB der funktion nicht auf das object "akt" zugreifen. wenn ich diese code ausführe bekomme ich nacheinander die messageboxen

alert('nr '+akt.id);
$('#bar_'+akt.id).effect('pulsate',{times:1},600,function() {
	alert(akt.id);
});

nr 1, nr 2, nr 3, nr 4, 4, 4, 4, 4

aber warum? akt ist immer das aktuelle JSON-object aber jQuery will nicht mitspielen...

 

[Konstantin Denerz]

leg die JSON Objekte "im richtigen Scope" ab und greife aus dem Callback auf die JSON-Daten zu, statt auf die aktuelle Referenz. Das heißt, bei jedem Zugriff über das Array mit JSON Objekten drüber laufen.

Pseudo-Code:
var arrayWithJSONData = [{id:"bar_1", height:20},{id:"bar_2"}, ...]

var findDataById = function(id){
for(var index in arrayWithJSONData){
var currentData = arrayWithJSONData[index];
if(currentData.id == id){
return currentData;
}
}
}

for(.....){
$('#bar_'+akt.id).effect('pulsate',{times:1},600,function() {
var akt = findDataById(this.id);
usw.....
});
}

 

[Matthias Reitinger]

Hallo,

am einfachsten wäre es wohl, wenn man die Daten direkt im DOM-Objekt speichert:

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

Grüße,
Matthias

 

[DerDaniel]

Die Idee mit dem DOM-Objekt ist genauso genial wie einfach...

Damit komme ich sicherlich ein Stück weiter,
vielen Dank für den Tipp!