nicht angemeldet
Schleife mit set timeout
Struppihallo!
leider kenne ich mich mit js nicht wirklich aus bzw. hab nur elementare kenntnisse, deswegen bitte ich euch um hilfe:
mit folgendem Script kann man die Opacity eines Divs ändern:
<script type="text/javascript" language="JavaScript">
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
</script>
der dazugehörige Aufruf der Funktion:
bspw.: <a href="#" onclick="changeOpac(50,'optest');">Link</a>
Nun würde ich gerne ein Fade des Divs dadurch erzeugen, dass die funktion 'optest' in sehr kurzen zeitintervallen mit einem verringerten Opacity - Wert aufgerufen wird bzw. über einen dazugehörigen Link das ganze auch wieder retour geschieht.
Settimeout müsste doch die Funktion dafür sein?
Sorry für die Anfängerfrage und danke für eure Hilfe
lg
max
-
Hallo Max,
Nun würde ich gerne ein Fade des Divs dadurch erzeugen, dass die funktion 'optest' in sehr kurzen zeitintervallen mit einem verringerten Opacity - Wert aufgerufen wird bzw. über einen dazugehörigen Link das ganze auch wieder retour geschieht.
Settimeout müsste doch die Funktion dafür sein?in SELFHTML aktuell gibt es dazu den passenden Beitrag: Komfortable Timer-Funktion von molily und Struppi.
Freundliche Grüße
Vinzenz
-
vielen dank euch beiden für die schnellen und hilfreichen antworten!
ich werde mir den link ansehen und den code gleich ein mal ausprobieren!
danke nochmal!
lg
max
-
-
Hallo,
Ja, mit window.setTimeout oder window.setInterval kannst Du sowas machen. Z.b. in etwa so:function fade (id, actOpac, endOpac, step) { //Abbruchkriterium - Wenn Opacity auf Zielwert ist if (Math.abs(endOpac - actOpac) < step) { changeOpac(endOpac, id); return; } //Fade changeOpac(actOpac, id); actOpac += (actOpac > endOpac) ? -step : step; window.setTimeout("fade('"+id+"', "+actOpac+","+endOpac+","+step+");", 40); } // Bsp. FadeIn fade ("meinDiv", 0, 100, 10); //Bsp. FadeOut fade ("meinDiv", 100,0,10);Dies erhöht/erniedrigt die Opacity alle 40ms um 10. Wählst Du einen anderen Wert für "step" als 10, kannst Du das Faden beschleunigen oder verlangsamen.
(All das ist ohne Gewähr, ich habs nur runtergetippt und nicht ausprobiert - evtl. Syntaxfehler bitte ich also zu entschudligen :) )
Grüße,
Jörg-
servus!
also meine html hat so ausgesehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Opacity</title>
<style type="text/css" media="screen">
div#optest {
width: 800px;
height:800px;
background-color:#FF0000;
filter:alpha(opacity=100);
-moz-opacity:1.0;
KhtmlOpacity: 1.0;
}
</style><script type="text/javascript" language="JavaScript">
function fade (id, actOpac, endOpac, step) {
//Abbruchkriterium - Wenn Opacity auf Zielwert ist
if (Math.abs(endOpac - actOpac) < step) {
changeOpac(endOpac, id);
return;
}//Fade
changeOpac(actOpac, id);
actOpac += (actOpac > endOpac) ? -step : step;
window.setTimeout("fade('"+id+"', "+actOpac+","+endOpac+","+step+");", 40);
}
</script>
</head>
<body>
<div id="optest"></div>
<a href="#" onclick="fade('optest', 100,0,10);">Fade out</a>
<a href="#" onclick="fade('optest', 0, 100, 10);">Fade in</a>
</body>
</html>leider tut sich nix, wenn man die links anklickt.
im ie steht unten das "warndreieck", dass sich ein fehler darin befindet.HMmm weißt du was da falsch läuft?
danke schon mal!!
lg
-
also meine html hat so ausgesehen:
So würde die funktion mit der Timer prototype aussehen:
function fade (id, actOpac, endOpac, step) { var obj = document.getElementById(id); var o = actOpac; function opacity () { o += (actOpac > endOpac) ? -step : step; if(typeof obj.style.filter != 'undefined') obj.style.filter = 'alpha(opacity=' + o + ')'; else if( typeof obj.style.opacity != 'undefined') obj.style.opacity = o / 100; return !(Math.abs(endOpac - o) < step); }; opacity.Timer(20, 100); }Struppi.
-
servus!
ich habe es mit dem eingebauten oberen code versucht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Opacity</title>
<style type="text/css" media="screen">
div#optest {
width: 800px;
height:800px;
background-color:#FF0000;
filter:alpha(opacity=100);
-moz-opacity:1.0;
KhtmlOpacity: 1.0;
}
</style><script type="text/javascript" language="JavaScript">
function fade (id, actOpac, endOpac, step) {
var obj = document.getElementById(id);
var o = actOpac;
function opacity () {
o += (actOpac > endOpac) ? -step : step;
if(typeof obj.style.filter != 'undefined')
obj.style.filter = 'alpha(opacity=' + o + ')';
else if( typeof obj.style.opacity != 'undefined')
obj.style.opacity = o / 100;
return !(Math.abs(endOpac - o) < step);
};opacity.Timer(20, 100);
}</script>
</head>
<body>
<div id="optest"></div>
<a href="#" onclick="fade('optest', 100,0,10);">Fade out</a>
<a href="#" onclick="fade('optest', 0, 100, 10);">Fade in</a>
</body>
</html>aber leider ist das ergebnis auch, dass sich nichts tut. hab ich da was falsch gemacht? hast du es bei dir testen können?
danke viemals!!
lg
max-
aber leider ist das ergebnis auch, dass sich nichts tut. hab ich da was falsch gemacht? hast du es bei dir testen können?
Docvh es tut sich was, schau mal in die Fehlerkonsole (im Menü Extras). Du musst natürlich die Funktion, die Vinzenz dir gezeigt hat, einbauen.
Struppi.
-
hey
danke für deine antwort.
entweder bin ich zu blöd dafür, oder ich hab was übersehen.ist das so richtig? (funktioniert leider immer noch nicht)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Opacity</title>
<style type="text/css" media="screen">
div#optest {
width: 800px;
height:800px;
background-color:#FF0000;
filter:alpha(opacity=100);
-moz-opacity:1.0;
KhtmlOpacity: 1.0;
}
</style><script type="text/javascript" language="JavaScript">
Function.prototype.Timer = function (interval, calls, onend) {
var count = 0;
var payloadFunction = this;
var startTime = new Date();
var callbackFunction = function () {
return payloadFunction(startTime, count);
};
var endFunction = function () {
if (onend) {
onend(startTime, count, calls);
}
};
var timerFunction = function () {
count++;
if (count < calls && callbackFunction() != false) {
window.setTimeout(timerFunction, interval);
} else {
endFunction();
}
};
timerFunction();
};function fade (id, actOpac, endOpac, step) {
var obj = document.getElementById(id);
var o = actOpac;
function opacity () {
o += (actOpac > endOpac) ? -step : step;
if(typeof obj.style.filter != 'undefined')
obj.style.filter = 'alpha(opacity=' + o + ')';
else if( typeof obj.style.opacity != 'undefined')
obj.style.opacity = o / 100;
return !(Math.abs(endOpac - o) < step);
}Function.prototype.Timer(20, 100);
};</script>
</head>
<body>
<div id="optest"></div>
<a href="#" onclick="fade('optest', 100,0,10);">Fade out</a>
<a href="#" onclick="fade('optest', 0, 100, 10);">Fade in</a>
</body>
</html>danke für deine geduld und hilfe!
lg
max-
Hi,
entweder bin ich zu blöd dafür, oder ich hab was übersehen.
ist das so richtig? (funktioniert leider immer noch nicht)
Wenn du "funktioniert leider immer noch nicht" fuer eine Problembeschreibung haeltst, dann waehle ich Moeglichkeit #1.
*scnr*
MfG ChrisB
-
-
-
-
-
-