animation einmal abspielen und dann bild löschen

[littleHtml Freak]

hallo,

ich würde gerne eine anmiation einmal abspielen und dann das bild löschen.
die funktion klasseaendern ändert zunachst die klasse eines tags sodass das hintergrundbild von einem normalen bild zu einem animierten gif wird. das klappt wenn ich das setTimeout weglasse. die anmation dauert 600ms und das ganze element soll mit der funktion loeschen gesloescht werden, nachdem die animation einmal gelaufen ist. das problem ist dass zwar das hintergrundbild geändert wird die animation jedoch nicht abgespielt wird.
ich schätze dass das daran liegt, dass das ganze programm von timeout angehalten wird.
hat wer ne idee was ich machen könnte?

function klasseaendern(id){
         
         var klasse = document.createAttribute("class");
         klasse.nodeValue = "monster1_t";
         var element2 = document.getElementById("mon"+id)
         element2.setAttributeNode(klasse);
         setTimeout("loeschen("+id+")", 600);
}

gruß simon

 

[littleHtml Freak]

aus einem mir nich tersichtlichen grund(ich habe nichts geändert) funktioniert es jetzt halbwegs...
beim ersten ausführen geht es nicht aber bei den darauf folgenden malen schon
leigt das daran dass die animation erstmal geladen werden muss? wenn ja wie kann ich die direkt im vorfeld laden?
gibt es da eine elegantere möglichkeit als sie mit z index 1 hinter einem anderen element zu laden und wieder zu löschen?

 

[struppi]

function klasseaendern(id){
         
         var klasse = document.createAttribute("class");
         klasse.nodeValue = "monster1_t";
         var element2 = document.getElementById("mon"+id)
         element2.setAttributeNode(klasse);
         setTimeout("loeschen("+id+")", 600);
}

Ich weiß nicht, ob ich's dir nicht schon gesagt habe, dieses create Attribut ist überflüssig, jedes Element hat bereits die Eigenschaft, du musst diese nicht erzeugen und in dem Fall kannst du direkt die Eigenschaft über className ansprechen (da class ein reserviertes Wort ist). Du machst es dir also unnötig umständlich.

Auch der Aufruf der Timeout Funktion ist unglücklich und funktioniert nur, wenn id eine Zahl ist, was aber nicht erlaubt ist. Benutze closures das ist besser:

setTimeout(function() {loeschen(id)}, 600);

 

[littleHtml Freak]

stimmt das mit der class hast du schonmal erwähnt... habs halt gemacht, weil ich auch andere attribute hinzufüge und dann hab ichs mit copy paste gemacht. welche anderen attribute kann ich denn noch so aufrufen? alle die reservierte worte sind?
und das mit dem löschen klappt eigendlich gut weil ich die ids durchnummeriere und dann irgend nen präfix davor setzte:

var element2 = document.getElementById("mon"+id)

ist also schon erlaubt
und zu diesen closures:
bedeutet das: führe die funtion function() aus, warte 600ms und dann führe funktion loeschen() aus?

 

[struppi]

Du kannst alle Attribute, die ein HTML Element hat, so aufrufen. z.b. style, id, class (bzw. className), onevent (halt die Events) und auch die jeweilig individuellen Attribute wie src oder href

Nein, das closure ist nur eine Funktionsreferenz, die dann nach x ms aufgerufen wird.

Funktionsreferenzen sind eine fundamentale Sache in JS. Sieh dir die Beispiele an:

var mein_alert = window.alert;
mein_alert('Hallo!');

var eine_funktion = function(param) {
  mein_alert(param);
};

eine_funktion('Hallo');

// ode auch:

var erzeuge_funktion = function(param) {
   var counter = 0;
   return function(){
    counter++;
    alert(counter + ' Aufruf von  ' + param) 
   };
}
var test_1 = erzeuge_funktion('Test 1');
test_1();
test_1();
test_1();
var test_2 = erzeuge_funktion('Test 2');
test_2();
test_2();

 

[littleHtml Freak]

so wie ich das verstehe wird einfach eine neue funktion erzeugt, die die funktion loeschen() enthält; den vorteil sehe ich in diesem fall ehrlich gesagt nicht
ich habe das mal hier angewand:

var nachladen = function() { 
                      clip = max_clip;
                     document.getElementById("amo").innerHTML = clip+"/"+max_clip;                     
                 };
                 
                  document.setTimeout("nachladen()", 2000);

 

[struppi]

Der Vorteil ist, das du jede Art von Parameter übergeben kannst und es ist wesentlich schneller, als die String Variante.

In deinem Beispiel ist der String völlig überflüssig:

var nachladen = function() { 
                      clip = max_clip;
                     document.getElementById("amo").innerHTML = clip+"/"+max_clip;                     
                 };
                 
                  document.setTimeout(nachladen, 2000);

 

[DarkDragon193]

Wenn wir schon sowas hier

var erzeuge_funktion = function(param) {
   var counter = 0;
   return function(){
    counter++;
    alert(counter + ' Aufruf von  ' + param) 
   };
}

haben, hätte ich da auch noch eine Frage... Wenn beispielsweise eine Funktion als Callback ausgeführt wird und eine Variable der "Mutterfunktion" verwendet, welche durch einen erneuten Aufruf der Mutterfunktion überschrieben wird, wann kann man dann sowas benutzen und wann sollte man da herum arbeiten?

Zum Beispiel bei AJAX-Requests. Der Einfachheit halber werde ich diesen Code kurz halten...

function AJAX( url ) {
  var xhr = new XMLHttpRequest( );
  xhr.open( url );
  xhr.onreadystatechange = function( ) {
    alert( url );
    alert( this.url );
  };
  xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-encoded' );
  xhr.send( null );
}

AJAX( "http://www.google.de/" );
// Ich weiß, das geht nicht wegen der Cross-Domain-Restriction.
AJAX( "http://www.html.de/" );

this.url wäre die korrekte URL, url wäre gegebenenfalls in beiden Funktionsaufrufen html.de Forum - HTML fr Anfnger & Fortgeschrittene. In diesem Fall wäre das "Workaround" sehr einfach, aber was, wenn man kein solches Objekt hat, beispielsweise gerade bei Timeouts?

 

[struppi]

Ich verstehe nicht, worauf du hinaus willst. Dein Beispiel ist etwas verquer, da this in dem Falle das window Objekt ist, also müßte this.url eine globale Variabel sein. Die Lokale Variabel url ist beide Male im Event jeweils der beim Aufruf übergebe Parameter.

 

[DarkDragon193]

So habe ich des öfteren meine Variablen übergeben und als ich this überprüft habe indem ich es einfach per alert() habe ausgeben lassen, bekam ich auch ein [object XMLHttpRequest] angezeigt. Nun weiß ich nicht, mit wie vielen Browsern das machbar ist, habe das bisher nur auf Chrome und Firefox so getestet. So oder so verwende ich dafür momentan eher jQuery.

Wie auch immer, es ging mir lediglich darum, dass der Parameter, auf den im Callback zugegriffen wird, der ja meistens erst später ausgeführt wird, bei einem erneuten Aufruf der Funktion bevor der Callback ausgeführt wurde, überschrieben wird, und somit letztendlich beim Aufruf des Callbacks einen anderen Wert enthält. So hätte in diesem Beispiel die URL den Wert http:/ /www.html.de/, von der Richtigkeit diesen Codes mal abgesehen.

 

[struppi]

Wie auch immer, es ging mir lediglich darum, dass der Parameter, auf den im Callback zugegriffen wird, der ja meistens erst später ausgeführt wird, bei einem erneuten Aufruf der Funktion bevor der Callback ausgeführt wurde, überschrieben wird, und somit letztendlich beim Aufruf des Callbacks einen anderen Wert enthält. So hätte in diesem Beispiel die URL den Wert http:/ /www.html.de/, von der Richtigkeit diesen Codes mal abgesehen.

Das ist falsch. Der Parameter wird bei jedem aufruf konserviert.

EDIT: und das andere hab ich mal probiert, du hast Recht es ist das XMLHttpRequest Objekt. Ich bin aber relativ sicher, dass das nicht immer so war.

 

[DarkDragon193]

Gut, dann muss ich mir darum ja keine Sorgen mehr machen. Dankeschön. :)