Alpha mit fade machen

S

Subwoover

Erfahrenes Mitglied
Hey ich hab da mal ein kleines script geschrieben (bin totaler JS anfänger also bitte konstruktive kritik) und hätte gern einen fader eingebaut...
das script wechselt ganz simpel den alphawert eines bildes, möcht aber dass das langsam passiert und nicht schwups und gewechselt...

Code: 
function alpha(itemID,sa,ea) {
	if (itemID.style.filter=="alpha(opacity="+sa+")") {
		itemID.style.filter="alpha(opacity="+ea+")";
	} else {
		itemID.style.filter="alpha(opacity="+sa+")";
    }
    window.event.cancelBubble=true;
}

das ist mal das script, und wie mach ich das nun?
 
Zuletzt bearbeitet:
Das könntest du machen, indem du mit Hilfe eines Intervals den Wert schrittweise erhöhst / senkst.

Z. B. so:

var ea = 1;
var sa= 1;
var aktiv = window.setInterval("alpha('ItemID')",1000);

function alpha(itemID) {

ea++

if (itemID.style.filter=="alpha(opacity="+sa+")") {
itemID.style.filter="alpha(opacity="+ea+")";
} else {
itemID.style.filter="alpha(opacity="+sa+")";
}
window.event.cancelBubble=true;
}
 
kurze zwischenfrage zum lernen:

könnte man da auch ein settimeout benutzen. und was ist der Unterschied zwischen interval und timeout?

2b
 
Die Methode settimeout führt eine Funktion EINMALIG nach der eingestellten dauer aus.
Die Methode intervall führt die Funktion aber so oft aus, bis man clearinterval setzt.

Deswegen eignet sich settimeout für so ein Vorhaben nicht. Diese Methode kann man z. B. verwenden, wenn sich nach einer bestimmten Zeit ein Fenster öffnen soll.
 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">
var i=100;


function fadeOut(){
var aktiv = window.setInterval("fadeOut()",20);
i=i-1;
m1.style.filter="alpha(opacity="+i+")";
if(i==0) window.clearInterval(aktiv);
}
function fadeIn(){
m1.style.filter="alpha(opacity=100)";
}

</script>

<body bgcolor="#FFFFFF" text="#000000">
<table bgcolor=red><tr><td onmouseover="fadeIn()" ; onmouseout="fadeOut()">link</td></tr></table>

<div id="m1" style="filter:alpha(opacity=100) ; position:absolute ; left:50px ; top:100px">
<table border="1" bgcolor="green">
<tr><td>sub_1</td></tr>
<tr><td>sub_2</td></tr>
</table>
</div>


</body>
</html>





wieso endet dies dann in einer endlosschleife-> mein browseer verursacht 100% prozessor auslastung, aber das mit dem fadeOut funktioniert 1 mal ;-)...was ist daran falsch an meinem code?
 
Hallo,

du hast das setIntervall() an der falschen Stelle - clearIntervall wird nie errreicht. Ausserdem setzt du die Opacity nach dem Einblenden nicht mehr zurück auf 100, so daß ein zweiter Fade unmöglich wird. Versuchs mal so:
Code: 
<html>
<head>
<script language="JavaScript">
var i=100;
var aktiv;

function fadeOut(){
    if(i==0) {
        window.clearInterval(aktiv);
    }else{
        i--;
        m1.style.filter="alpha(opacity="+i+")";
    }
}

function fadeIn(){
    m1.style.filter="alpha(opacity=100)";
    i = 100;
}

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table bgcolor=red><tr><td onmouseover="fadeIn()" ; onmouseout='aktiv = window.setInterval("fadeOut()",20);'>link</td></tr></table>

<div id="m1" style="filter:alpha(opacity=100) ; position:absolute ; left:50px ; top:100px">
<table border="1" bgcolor="green">
<tr><td>sub_1</td></tr>
<tr><td>sub_2</td></tr>
</table>
</div>

</body>
</html>
sollte eigentlich laufen...


ciao Andreas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück