opacity effect

[tropenberta]

hi leuts
ich habe einen div der auf button click erscheint. jetzt möchte ich aber das er nicht mit einem schlag erscheint sondern soll er sanft erscheinen bis zur ner opacity von 0.8.
hab mir da was kleines ausgedacht - was aber net funktioniert und ich versteh meinen denkfehler net. pls hlp.

  
function opening(id)  
{  
 if ( id == '1' )  
  { var op = 0.0;  
    window.setTimeout("effect()",0);  
    function effect()  
     {  
      var cont = document.getElementById("openmenu").style.opacity  
      if ( cont < 0.9 )  
       { op = op + 0.1;  
         cont = op;  
         window.setTimeout("effect()",100); }  
     }  
  }  
}  

die id ist für button zum öffnen( id=1 ) und später noch 2er Button schliesen( id=2 )
erstmal möchte ich das der div sanft erscheint, sanft ausblenden sollte dann kein prob mehr sein

[ChrisB]

Hi,

ich habe einen div der auf button click erscheint. jetzt möchte ich aber das er nicht mit einem schlag erscheint sondern soll er sanft erscheinen bis zur ner opacity von 0.8.
hab mir da was kleines ausgedacht - was aber net funktioniert und ich versteh meinen denkfehler net.

Der Denkfehler ist, sowas heutzutage noch als JavaScript-Animation machen zu wollen.

Schau dir CSS Transitions an – die kannst du mit simplem JavaScript *triggern* (z.B. durch Ändern der Klasse eines Elements)¹, brauchst aber die eigentliche Animation von Start- zu Endwert der Opacity nicht selber implementieren.

¹ Hier könnte man jetzt auch wieder argumentieren, dass es zum triggern auch kein JavaScript bräuchte, sondern das mit :target auch zu machen wäre – aber diesbezüglich sieht es mit der Browser-Unterstützung noch nicht optimal aus (IE<9), während fehlende Transitions-Unterstützung kein Problem wäre, weil dann die opacity halt gleich von Start- auf Endwert geändert wird, ohne Animation.

MfG ChrisB

[tropenberta]

Hi ChrisB

danke für deine antwort.
mir geht es um was anderes - ich bin blutiger anfänger und möchte halt gerne javascript lernen.
ich kann mir auch irgendwo eine css oder ein jquery aus dem netz holen, anpassen und die macht es dann. aber darum geht es mir nicht. ich will einfach nur mir selber eine aufgabe stellen und diese zu nem ergebnis bringen. durch deinen post bin ich net wirklich weiter, weil es sich nicht auf mein problem bezieht sondern auf einen komplett anderen weg.

also pls kann mir jemand sagen wo der fehler in meinem script ist. welchen denkfehler ich mache. und bitte nicht wie man es anders machen könnte.

gruss tropenberta

[Gunnar Bittersmann]

@@tropenberta:

nuqneH

mir geht es um was anderes - ich bin blutiger anfänger und möchte halt gerne javascript lernen.

Das erste, was man über JavaScript lernen sollte, ist, wozu man JavaScript sinnvoll einsetzen kann. Kätzchen zu töten ist kein sinnvoller Einsatz für JavaScript.

ich kann mir auch irgendwo eine css oder ein jquery aus dem netz holen, anpassen und die macht es dann.

Auf die Weise lernst du kein JavaScript.

ich will einfach nur mir selber eine aufgabe stellen und diese zu nem ergebnis bringen.

Das ist gut so. Du hast dir aber eine für JavaScript falsche Aufgabe gestellt. Die Aufgabe ist gut dafür geeignet, CSS zu lernen.

durch deinen post bin ich net wirklich weiter, weil es sich nicht auf mein problem bezieht sondern auf einen komplett anderen weg.

Auf den eizig sinnvollen Weg für diese Aufgabe.

Qapla'

[molily]

Du hast dir aber eine für JavaScript falsche Aufgabe gestellt. Die Aufgabe ist gut dafür geeignet, CSS zu lernen.

OP:

ich habe einen div der auf button click erscheint.
(…)
die id ist für button zum öffnen( id=1 ) und später noch 2er Button schliesen( id=2 )

Wie löst du das per CSS?

Nein, dreckige Hacks über :target udgl., die man auch nicht anders denn als Zweckentfremdung von CSS bezeichnen kann, gelten nicht.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Wie löst du das per CSS?

Wie ChrisB sagte. Und Cheatah.

JavaScript ändert den Zustand der Webanwendung. Die eigentliche Transition ist Sache von CSS.

Qapla'

[molily]

während fehlende Transitions-Unterstützung kein Problem wäre, weil dann die opacity halt gleich von Start- auf Endwert geändert wird, ohne Animation.

Es kann durchaus ein Problem sein. Darüber gab es erst kürzlich einen Artikel: Transitional Interfaces.

Sinnvolle Transitions sind ein integraler Bestandteil der User Experience. Ob man es sich leisten kann, bei Besuchern mit IE < 10 komplett darauf zu verzichten, ist eine zu ernstzunehmende Frage.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Sinnvolle Transitions sind ein integraler Bestandteil der User Experience. Ob man es sich leisten kann, bei Besuchern mit IE < 10 komplett darauf zu verzichten, ist eine zu ernstzunehmende Frage.

Nunja. Es mag Fälle geben, wo die Transition entscheidend ist und man einen Fallback für ältere Browser (graceful degredation) haben möchte. (Was nicht heißen muss, die Transition in allen Browsern mit JavaScript zu realisieren.)

In anderen Fällen sollte progressive enhancement Mittel der Wahl sein.

Qapla'

[ChrisB]

Hi,

während fehlende Transitions-Unterstützung kein Problem wäre, weil dann die opacity halt gleich von Start- auf Endwert geändert wird, ohne Animation.

Es kann durchaus ein Problem sein. Darüber gab es erst kürzlich einen Artikel: Transitional Interfaces.

“Nearly nothing in the real world does anything as jarringly as just swapping states.”

Welcome to the real world – where modern browsers do exist.

Sinnvolle Transitions sind ein integraler Bestandteil der User Experience. Ob man es sich leisten kann, bei Besuchern mit IE < 10 komplett darauf zu verzichten, ist eine zu ernstzunehmende Frage.

Ja, ist es.
Ebenso wie die, wie viel Ressourcen man darauf verwenden möchte, simple erreichbare Dinge nachzubasteln um auch den Ewig-Gestrigen auf Teufel komm raus zum gleichen Erlebnis zu verhelfen.

MfG ChrisB

[Der Martin]

Hallo,

hab mir da was kleines ausgedacht - was aber net funktioniert und ich versteh meinen denkfehler net. pls hlp.

tja, auf den ersten Blick fällt mir etwas Triviales auf - keine Ahnung, ob Denkfehler oder nur einfach vergessen:

function opening(id)

{
if ( id == '1' )
  { var op = 0.0;
    window.setTimeout("effect()",0);
    function effect()
     {
      var cont = document.getElementById("openmenu").style.opacity
      if ( cont < 0.9 )
       { op = op + 0.1;
         cont = op;
         window.setTimeout("effect()",100); }
     }
  }
}

  
In der Funktion effect() liest du zwar schön regelmäßig die opacity-Eigenschaft des entsprechenden Elements aus, aber du schreibst den geänderten Wert nie zurück.  
  
Ciao,  
 Martin  

-- 
Besteht ein Personalrat aus nur einer Person, erübrigt sich die Trennung nach Geschlechtern.  
  (aus einer Info des deutschen Lehrerverbands Hessen)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[tropenberta]

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
In der Funktion effect() liest du zwar schön regelmäßig die opacity-Eigenschaft des entsprechenden Elements aus, aber du schreibst den geänderten Wert nie zurück.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

hi martin

mach ich das nicht mit cont = op ? damit schreib ich doch immer den erhöhten wert in variable cont oder ?

[Der Martin]

Hallo,

In der Funktion effect() liest du zwar schön regelmäßig die opacity-Eigenschaft des entsprechenden Elements aus, aber du schreibst den geänderten Wert nie zurück.
mach ich das nicht mit cont = op ?

nein, damit kopierst du den Wert nur nach cont.

damit schreib ich doch immer den erhöhten wert in variable cont oder ?

Genau, aber nicht auf die style-Eigenschaft des entsprechenden HTML-Elements, wo du den Wert ursprünglich herholst. Du hantierst da nur mit deinen eigenen scriptinternen Variablen.

Und bitte: Lass die Zitatmarkierungen so, wie sie die Forensoftware vorgibt. Danke sehr.

Ciao,
 Martin

[gast_42]

function opening(id)
{
if ( id == '1' )
  { var op = 0.0;
    window.setTimeout("effect()",0);

effect();
reicht stattdessen

function effect()
     {
      var cont = document.getElementById("openmenu").style.opacity

cont ist vermutlich ein String

if ( cont < 0.9 )

den du also in eine Zahl umwandeln müsstest für diesen Vergleich

{ op = op + 0.1;

bzw. op+=0.1;

cont = op;

und nun solltest du noch den Wert zurückschreiben in document.getElementById("openmenu").style.opacity

window.setTimeout("effect()",100); }
     }
  }
}

>   
> die id ist für button zum öffnen( id=1 )  

ist hoffentlich keine ID eines Elements im HTML, denn dort sind Zahlen nicht zulässig  

[tropenberta]

die id ist für button zum öffnen( id=1 )
ist hoffentlich keine ID eines Elements im HTML, denn dort sind Zahlen nicht zulässig

nene is es nicht
der eine button übergibt den wert 1 an meine funktion zum öffnen
der andere den wert 2 zum schliesen.

[molily]

Hallo tropenberta,

Generell kannst du dir einmal den Artikel Fader-Framework in JavaScript ansehen. Die ersten Seiten des Artikels erklären, wie Animationen in JavaScript grundlegend gelöst werden.

function opening(id)
{
if ( id == '1' )
  { var op = 0.0;

var op = 0; reicht hier aus.

window.setTimeout("effect()",0);

Hier kannst du auch einfach effect(); schreiben, oder musst du hier aus dem aktuellen Stack springen? Diesen Trick wendet man i.d.R. nur an, wenn man aus der aktuellen Funktionsausführung springen will, sodass der sogenannte Event Loop die angegebene Funktion ausführt, wenn alle anderen wartenden ausgeführt worden sind. (Wenn dir das nichts sagt, reicht vermutlich effect().)

Außerdem kannst du hier direkt

setTimeout(effect, 0);

schreiben und das Funktionsobjekt effect übergeben. Zu Verstehen, dass Funktionen vollwertige Objekte in JavaScript sind, ist sehr wichtig.

function effect()
     {
      var cont = document.getElementById("openmenu").style.opacity

Das liest den Inline-Style aus. Der ist erst einmal leer (ein leerer String), sofern du ihn vorher nicht im style-Attribut im HTML oder per JavaScript gesetzt hast.

Sinnvoller wäre getComputedStyle, siehe CSS-Eigenschaften mit JavaScript auslesen.

Dass der Wert beim ersten Mal leer ist, ist hier nicht so schlimm:

if ( cont < 0.9 )

Diese Abfrage ergibt trotzdem true, weil der leere String für den Vergleich automatisch in eine Zahl umgewandelt wird, was 0 ergibt.

cont = op;

Diese Zuweisung ändert den Variablenwert, mehr nicht. Die Variable ist nicht magisch mit der opacity-Eigenschaft verknüpft. Du musst diese schon explizit setzen:

// Element nur einmal holen und in einer Variable speichern  
var element = document.getElementById("openmenu");  
// Inline-Style lesen  
var opacity = element.style.opacity;  
// Schreiben  
element.style.opacity = newOpacity;

window.setTimeout("effect()",100); }

Hier reicht auch:

setTimeout(effect, 100);

Allgemein schleift man den aktuellen Wert durch, anstatt immer mit jedem Animationsframe (Ausführung von effect) den vorhandenen Wert zu lesen, bevor man ihn schreibt. Das verbessert die Performance. Dazu muss man aber mit Closures arbeiten, sodass sich die Schritt-Funktion effect verzögert immer wieder mit dem aktuellen Wert aufruft.

Wenn du gerade lernen möchtest, kannst du dir auch requestAnimationFrame ansehen, eine bessere Alternative zu setTimeout für Animationen.

Grüße,
Mathias

[molily]

Allgemein schleift man den aktuellen Wert durch, anstatt immer mit jedem Animationsframe (Ausführung von effect) den vorhandenen Wert zu lesen, bevor man ihn schreibt. …

requestAnimationFrame

Beispiel dafür:

http://jsfiddle.net/dCF4N/

Das Auslesen habe ich hier gestrichen, die Animation startet immer bei opacity: 0.

Mathias

[tropenberta]

hI Mathias

ok - jetzt hab ich es kapiert - geh schnell mal geburtstag feiern und dann mach ich mich heute nacht gleich nochmal drüber.

vielen vielen dank

nicht nur an martin sondern an euch alle vielen dank.