[JavaScript]Transparenz-Script

[the_phoenix]

Hallo Forumgemeinde,
ich habe ein Script geschrieben, das einen Crossoverbrowserfadeeffekt
(sorry für das lange wort ) ausführt.

Könnt ihr euch das mal bitte angucken, ich wäre sehr dankbar.

Hier ist es:

var zahl=100;
var zahl1=0;
var bis=50; 
var wert=5; 
function fadeout( id )
{
	var i = zahl-= wert;
	zahl = i;
	test2( id );
	if(zahl==0){zahl1=0;}
	var aktiv = window.setTimeout( function () 
		{
			fadeout( id) 
		}, 10);
		
	if( zahl < wert)
	{
		window.clearTimeout( aktiv );
	}
}

function test2( id )
{
	var y = zahl / 100;
	
	var obj=document.getElementById( id );
	
	obj.style.MozOpacity = y;
	obj.style.opacity = y;
	obj.style.filter = "alpha(opacity:" + ( y * 100 ) + ")";
}

function fadein( id )
{
	var i = zahl1 += wert;
	zahl1 = i;
	test4( id );
	if(zahl1==bis){zahl=bis;}
	var aktiv = window.setTimeout( function () 
		{
			fadein( id) 
		}, 10);
		
	if( zahl1 > bis-wert)
	{
		window.clearTimeout( aktiv );
	}
}
function test4( id )
{
	var y = zahl1 / 100;
	
	var obj=document.getElementById( id );
	
	obj.style.MozOpacity = y;
	obj.style.opacity = y;
	obj.style.filter = "alpha(opacity:" + ( y * 100 ) + ")";
}

Danke,
the_phoenix

 

[ToM80]

angeschaut, und nu?

 

[the_phoenix]

Hi, hast du einen Verbesserungsvorschlag oder findest du es gut?
habe glaube ich vergessen, dass zu erwähnen, sorry .

 

[ToM80]

Ausprobiert habe ich nix, müsste mir ja alles um die funktion drummherum schreiben

Grüße

ToM80

 

[the_phoenix]

Wie meinst du das? Ich kann ja mal einen Beispielseite machen, wenn du das meinst.

 

[dkdenz]

Besser ist das...

 

[ToM80]

genau das meinte ich

 

[the_phoenix]

Sorry, dass das so lange gedauert hat.
Also, hier ist der Link:
Mein Beispiel!
bye,
the_phoenix

 

[Albu]

- So generell läßt die Namensgebung arg zu wünschen übrig. zahl, zahl1, test2, test4 - phantasielos und für was sind die gut?
- Desweiteren ist der Einsatz von globalen Variablen unschick.
- Was wenn man nicht nur ein Element "faden" lassen möchte?

Fazit: in seiner jetzigen Form völlig unbrauchbar...

 

[ein schlauer]

du musst aufpassen dass dir die Funktionen nicht in gegenseitig in die Quere kommen (einfach mal schnell in das Feld klicken und dann wieder raus). übrigens musst du den Timeout nicht "clearen" nur wenn du ihn unterbrechen wolltest, was du in dem Fall ja nicht tust.

 

[the_phoenix]

Danke erstmal, das ihr euch darum gekümmert habt.
@Albu
Was würdest du empfehlen anstelle von globalen Variablen?
Für die Variablen sind mir nun mal keine phantasievollen Namen eingefallen.
@ein schlauer
Wie kann ich denn ein Timeout unterbrechen?
Ich google mal...

 

[Albu]

Was würdest du empfehlen anstelle von globalen Variablen?

Schau Dir mal an, wie das z.B. mootools macht...
Beispiel: mootools demos - Fx.Morph

Für die Variablen sind mir nun mal keine phantasievollen Namen eingefallen.

ne lahme Ausrede!

Wie wärs mit aufgabenspezifischen Namen, oder Namen aus denen man die Bedeutung ablesen kann?!

Wie kann ich denn ein Timeout unterbrechen?

Du musst nichts abbrechen, was Du schon nicht hättest starten brauchen....

 

[the_phoenix]

Du musst nichts abbrechen, was Du schon nicht hättest starten brauchen....

Aber irgendwie muss ich doch hinkriegen, dass sich die Funktion immer wiederholt, damit der effekt des fadens entsteht.

mootools sieht zwar sehr gut, aber ist auch sehr kompliziert, finde ich.

 

[ein schlauer]

Statt

    var aktiv = window.setTimeout( function () 
        {
            fadeout( id) 
        }, 10);
        
    if( zahl < wert)
    {
        window.clearTimeout( aktiv );
    }

einfach:

if( zahl > wert)window.setTimeout( function () 
        {
            fadeout( id) 
        }, 10);

Also nur den timeout auslösen, wenn es nötig ist. Dann musst auch nichts stoppen. allerdings dürfte es Probleme geben, da du dann gegenläufige Prozesse bekommmst, wenn du während fadein läuft fadeout aufrufst.

 

[the_phoenix]

Vielleicht ist das ein bisschen viel verlangt, aber wie könnte man das Problem mit der gegenläufigkeit lösen?
danke für deinen Vorschlag, du bist echt super!

 

[Albu]

Aber irgendwie muss ich doch hinkriegen, dass sich die Funktion immer wiederholt, damit der effekt des fadens entsteht.

Erstens hast Du sowieso ein Problem, wenn Du zwei Objekte gleichzeitig, oder unabhängig voneinander faden willst.
Zweitens: siehe ein schlauer

mootools sieht zwar sehr gut, aber ist auch sehr kompliziert, finde ich.

Du sollst mootools auch nicht nachprogrammieren. Die Benutzung ist nämlich wieder sehr einfach und logisch. Man kann alles einstellen, was man benötigt, und muss sich nicht um das lästige Drumherum kümmnern.
Und obwohl es jetzt kein Beispiel für das "Faden" dort gibt, bin ich sicher, dass es auch nur ein Zehnzeiler sein dürfte, um eine beliebige Anzahl Elemente gleichzeitig oder versetzt ein- oder ausfaden zu lassen.

 

[the_phoenix]

Ich wollte die mootools auch nicht nachprogrammieren. Es ist nur schwer für mich "fremde" Scripts einzubauen, da ich lieber etwas selbst programmiere und nicht bloß irgendwo rauskopiere, sonst lerne ich ja nichts und das will ich aber.

 

[ein schlauer]

OH, die Diskussion hatten wir hier gerade erst.
http://forum.jswelt.de/javascript/38393-bewegung.html
Natürlich lernst du was, wenn du in der Lage bist so ein Framework zu nutzen.

 

[lyc8069]

was ist schon ein fremdes script von mootools? Es ist ja auch ok, das sich auf mootools stützt, es ist ja schließlich das javascript framework überhaupt.

 

[the_phoenix]

Ja,dass schon. Es ist jedoch wichtig, das ich mir, wie ich schon erwähnt hatte, meine Scripte selber schreibe.

Aber ohne Frage lernt man was bei der benutzung von jsframeworks.