"fließende" animation?

[ByeBye 227189]

Hallo erstmal.
Ich beschäftige mich nun seit kürzerer Zeit mit Javascript, nach dem ich erste Schritte in HTML und PHP unternommen habe. Bin jetzt auch schon soweit mittels getElementById die ersten Manipulationen an meiner Seite und den Objekten dort vorzunehmen. Doch ist halt noch alles ein wenig "stockend", meint das ich keine flüssig animierten Vorgänge gestaltet bekomme.

habe die funktion setTimeout gefunden und mich an C erinnert, wo mit dem Befehl delay(int wert); der ablauf so und so viele millisekunden abgestoppt wird.
Doch jetzt sieht der Syntax anders aus als bei C und ich müsste bei setTimeout ja, dass
was gestoppt werden soll innerhalb der Funktion vor dem Zeitwert notieren. Also so:

for (i = 0; i <= 129; i++) {
			document.getElementById("content2").style.left = "-" + (bilderZahl + i) + "px";
		}, 600);

Aber irgendwo scheint sich bei mir ein Denkfehler aufgetan zu haben, da es nicht funktioniert.

Gibt es denn eine vergleichbare Alternative zu setTimeout();? Und kommt diese näher an das Prinzip von delay(); heran?

Danke für eure Hilfe

btw: Wie konnte ich noch mal mittels mouseevent innerhalb der Funktion einen Abbruchbefehl erzeugen? Da gab es so etwas, hab zumindest davon gehört.

So jetzt ist aber gut, mit der Fragerei!

 

[CPoly]

Ich gehe mal davon aus, dass delay() den Ablauf des Programms verzögert. So etwas existiert in Javascript nicht. setTimeout() registriert eine Funktion, welche dann Asynchron ausgeführt wird. Das bedeutet, dass nach setTimeout der Code normal weiterläuft und wenn die angegebene Zeit abgelaufen ist, wird die festgelegte Funktion aufgerufen und dann an der aktuellen Stelle weitergemacht. Dein Ansatz kann also nicht funktionieren.

var i = 0;
window.setTimeout("fn", 600);

function fn() {
    document.getElementById("content2").style.left = "-" + (bilderZahl + i) + "px";
    i++;
    if(i<129)
        window.setTimeout("fn", 600);
}

Oder besser via seIntervall

var i = 0;
var pointerAufDenTimer = window.setInterval("fn", 600);

function fn() {
    document.getElementById("content2").style.left = "-" + (bilderZahl + i) + "px";
    i++;
    if(i>129)
        window.clearInterval(pointerAufDenTimer);
}

 

[ByeBye 227189]

Also ich habe versucht den von dir vorgeschlagenen Code einzusetzen.
Ich habe hier jetzt die ganze Funktion von mir mal drin.

function klickeR() {
	var i=0;
	var bilder = document.getElementById("content2").style.left;
	
	/*
	 * Hier wir der pure Wert aus dem Styleattribut des "content2" DIVs geholt und da es
	 * erst ein String ist gesucht und danach zerlegt so das nur der warte als String
	 * ?ºbrig bleibt und anschlie?üend wird dieser String-Wert in eine Interger-Zahl ge?§ndert
	 * so das mit dem Wert des "container2" DIVs gerechnet werden kann.
	 */
	var eins = bilder.indexOf("-");
	var zwei = bilder.lastIndexOf("px");
	var neuBilder = bilder.slice(eins+1, zwei);
	var bilderZahl = parseInt(neuBilder);


	/*
	 * Aufruf der eigentlichen Funktion.
	 * Hier wird der Wert der Verschiebung erh??ht und die Tabelle mit den Bildern immer ein St?ºck
	 * weiter nach links verschoben.
	 	
	if(bilderZahl<=530){
			
		for (i = 0; i <= 129; i++) {
			setTimeout("document.getElementById(\"content2\").style.left = \"-\" + (bilderZahl + i) + \"px\";}", 600);
			
		}
			
	} else {
		document.getElementById("myTxt").innerHTML += "  Das ist genug!!";
	}
        */
	window.setTimeout("fn()", 600);
 
	function fn() {
    	document.getElementById("content2").style.left = "-" + (bilderZahl + i) + "px";
    	i++;
    	if (i > 129) {
			window.clearInterval(pointerAufDenTimer);
		}
	}
    
}

Diesen lasse ich über onclick="klickeR" in der HTML ausführen.
Kann es sein das mein ganzes Layout für den Code einfach nur murks ist?
Geht eine function innerhalb einer function überhaupt?

 

[ByeBye 227189]

boa Schwachsinn... jetzt misch ich schon die Antworten zusammen! Das darf ja nicht wahr sein!
Sorry. Hab gesehen das ich ein wenig von der setTimeout und der setInterval Antwort vermischt habe. -.-

 

[ByeBye 227189]

Alles klar...
Habe es nun mit der setTimeout(); Funktion geschafft.

mein Code sieht nun folgernder maßen für rechts sowie links herum aus.

var i=0;
var bilderZahl= 1;
function klickeR() {
	show=0;
	// Hilfsausgabe in eine textarea
	document.getElementById("myTxt").innerHTML += "Funktion gestartet: "+i+"\n";
	// Berechnung
	bilderZahl++;
	document.getElementById("content2").style.left = "-" + (bilderZahl) + "px";
    i++;
	
	// Überprüfung ob "i" gleich "129" ist, wenn ja soll "show" auf "1" gesetzt werden, damit
	// die Anweisung mit "setTimeout" nicht ausgeführt wird
	if (i == 129){
		show=1;
	}
	
	// Wird nur ausgeführt so lange "i" kleiner eins ist und show gleich eins ist
	if (i < 130 && show==0) {
		window.setTimeout("klickeR()", 1);
	}
	
	//Wenn show auf eins gesetzt wurde, und die zweite IF-Anweisung somit nicht ausgeführt wurde
	//werden "show" und "i" wieder auf null gesetzt, so dass die Funktion ein weiteres aufgerufen werden
	//muss.
	if(show==1){
		i=0;
		show=0;
	}
	
	
}


//----------------------------------|
// Das ganze jetzt nur anders herum |
//----------------------------------|


function klickeL() {
	show=0;
	// Hilfsausgabe in eine textarea
	document.getElementById("myTxt").innerHTML += "Funktion gestartet: "+i+"\n";
	// Berechnung
	bilderZahl--;
	document.getElementById("content2").style.left = "-" + (bilderZahl) + "px";
    i++;
	
	// Überprüfung ob "i" gleich "129" ist, wenn ja soll "show" auf "1" gesetzt werden, damit
	// die Anweisung mit "setTimeout" nicht ausgeführt wird
	if (i == 129){
		show=1;
	}
	
	// Wird nur ausgeführt so lange "i" kleiner eins ist und show gleich eins ist
	if (i < 130 && show==0) {
		window.setTimeout("klickeL()", 1);
	}
	
	//Wenn show auf eins gesetzt wurde, und die zweite IF-Anweisung somit nicht ausgeführt wurde
	//werden "show" und "i" wieder auf null gesetzt, so dass die Funktion ein weiteres aufgerufen werden
	//muss.
	if(show==1){
		i=0;
		show=0;
	}
	
	
}

Ja, es sind die PHP brackets, aber es ist farbig besser zu sehen

Zugegeben ist es nicht die eleganteste Lösung :-( , und es scheint ein wenig zu "laggn" aber das wird schon passen.

Danke für die Hilfe.

 

[ComFreek]

Du hast deinen Code in einen JAVA-Tag gepackt.
Ich will hier nur anmerken das JAVA ? JAVASCRIPT ist!

 

[ByeBye 227189]

Ist wirklich so und ich weiß das JScript nicht gleich Java ist.
Das PHP stand noch da als in den Brackets tatsächlich PHP stand Habe dann mal Java ausprobiert und gefiel etwas besser. Aber es soll nicht zeigen das JS auch in einem Java-Prog funktioniert sondern hier der Übersichtlichkeit dienen!

 

[sheel]

offtopic: JScript ist wieder was anderes

 

[ByeBye 227189]

Hehe, ok, ich gebe mich geschlagen!

Aber hey, es funktioniert immernoch!