Lässt ein vorher unsichtbares (das heißt durch die CSS-Angabe 'display:none;' ausgezeichnetes) Element erscheinen. Achtung! Die CSS-Angabe muß dirket im 'style'-Attribut des Elements gemacht werden, sonst funktioniert der Effekt nicht!
Effect.Appear('Element', [{Optionen}]);
Element bezwichnet wiederum die ID eines Elements oder das Element selbst. Die optionalen PArameter können folgende sein:
| Parameter | Beschreibung |
|---|---|
| duration | Dauer des Effekts in Sekunden. Standard:1.0. |
| from | Setzt den Startwert der Deckkraft auf einen Wert zwischen 0.0 und 1.0. Standard: 0.0 |
| to | Setzt den Endwert der Deckkraft auf einen Wert zwischen 0.0 und 1.0. Standard: 1.0 |
Es lassen sich auch alle Parameter des Opacity-Effektes anwenden. Die Anwendung des Effektes ist wieder wie bei den Grundeffekten:
<a href="javascript:void(0)" onclick="new Effect.Appear('appear1');">Anzeigen</a>
<div id="appear1" style="display:none; width:100px; height:100px; background-color:#0000FF;">
Ich bin ein div-Element
</div>
Beispiel 1 - Effect.Appear
Der Effekt bewirkt also, dass ein Element Angezeigt wird. Das Erscheinen kann man durch die Optionalen Parameter modifizieren:
<a href="javascript:void(0)"
onclick="new Effect.Appear('appear2',
{duration:3, to:0.5, transition:Effect.Transitions.wobble});">
Anzeigen
</a>
<div id="appear2"
style="display:none; width:100px; height:100px; background-color:#0000FF;">
Ich bin ein div-Element
</div>
Beispiel 2 - Effect.Appear mit veränderten Parametern
Hier wurden die Parameter 'duration' und 'to' gesetzt bzw. verändert. Das bewirkt in dem Fall, dass das Erscheinen des Elements 3 Sekunden lang dauert und die letztendliche Deckkraft nur 0.5, also 50% beträgt. Außerdem wurde der Übergangsparameter 'transition' auf 'Effect.Transitions.wobble' gesetzt (Siehe auch die Erklärung des 'transition'-Parameters bei den Grundeffekten).
Der Fade-Effekt ist nichts anderes als die Umkehrung des Appear-Effektes. Er blendet ein sichtbares Element aus, indem er die CSS-Eigenschaft display auf 'none' setzt.
Effect.Fade('Element', [{Optionen}]);
Die optionalen Parameter sind wieder die Grundparameter. Also gleich mal ein Beispiel mit verschiedenen Werten:
<a href="#" onclick="new Effect.Fade('divFade1',{duration:3.0, from:1.0});">
Ausblenden
</a>
<div id="divFade1"
style="width:100px; height:100px; background-color:#0000FF;">
Ich bin ein div-Element
</div>
Beispiel 1 - Effect.Fade mit längerer Dauer
Achtung! Wird der 'to'-Parameter auf einen Wert größer 0 gesetzt, macht der Effekt nichts anderes als Effect.Opacity.
Lässt ein Element 'verpuffen' wie eine Seifenblase.
Effect.Puff('Element', {Options});
Auch hier gelten wieder die gleichen optionalen Parameter 'duration', 'from' und 'to'. Und natürlich wieder ein kleines Beispiel zur Veranschaulichung:
<a href="#" onclick="new Effect.Puff('divPuff1',{duration:3.0});">Ausblenden</a>
<div id="divPuff1" style="width:400px; background-color:#0000ff; text-align:center;" >
Ich bin ein div-Element
</div>
Beispiel 1 - Effect.Puff mit einer Effektdauer von 3 Sekunden.
Besser schaut dieser Effekt aus wenn die Dauer der Standardwert 1 Sekunde oder kürzer ist:
<a href="#" onclick="new Effect.Puff('divPuff2',{duration:0.5});">Ausblenden</a>
<div id="divPuff2" style="width:400px; background-color:#0000ff; text-align:center;" >
Ich bin ein div-Element
</div>
Beispiel 2 - Effect.Puff mit kurzer Dauer.
Lässt ein Element gleichzeitig ausblenden und nach unten verschwinden.
Effect.DropOut('Element');
Dieser Effektsieht besser aus, wenn er schnell geschieht:
<a href="#" onclick="new Effect.DropOut('divDropOut1');">Ausblenden</a>
<div id="divDropOut1"
style="background-color:#0000ff; width:300px; height:100px; color:#ffffff;" >
Ich bin ein div-Element
</div>
Beispiel1 - DropOut in der Grundeinstellung
Natürlich kann der Effekt auch mit einer längeren Dauer, z.B. 3 Sekunden durchgeführt werden, allerdings verliert er dann 'das gewisse etwas':
<a href="#" onclick="new Effect.DropOut('divDropOut2', {duration:3});">Ausblenden</a>
<div id="divDropOut2"
style="background-color:#0000ff; color:#ffffff; width:300px; height:100px;" >
Ich bin ein div-Element
</div>
Beispiel 2 - mit längerer Dauer
'Schüttelt' ein Element, indem es öfters links und rechts bewegt wird.
Effect.Shake('Element');
Und das Beispiel:
<div onclick="new Effect.Shake(this);" style="background-color:#0000ff; color:#ffffff; width:300px; height:100px;" > Klicken um mich mal kräftig durchzuschütteln:) </div>
Beispiel - Der Shake-Effekt
Eine (englische) Anleitung zum modifizieren des Effekts gibts im script.aculo.us-Wiki.
Lässt ein Element ähnlich dem Bild eines Fernsehers beim ausschalten verschwinden.
Effect.SwitchOff('Element');
Das Beispiel:
<a href="#" onclick="new Effect.SwitchOff('divSwitch1');">Ausblenden</a>
<div id="divSwitch1"
style="background-color:#0000ff; color:#ffffff; width:300px; height:100px;" >
Ich bin ein div-Element
</div>
Beispiel - Effect.SwitchOff in der Grundeinstellung
Der Effekt lässt ein Element von oben herab- bzw. nach oben hinauffahren. Dabei wird allerdings nur der Rahmen des Elements verändert, der Inhalt bleibt auf der eigentlichen Position.
Effect.BlindDown('Element', {duration:3});
Effect.BlindUp('Element', {duration:3});
Das folgende Beispiel enthält beide Effekte - BlindUp und BlindDown:
<a href="javascript:void(0)" onclick="new Effect.BlindUp('divBlind1');">Ausblenden</a> -
<a href="javascript:void(0)" onclick="new Effect.BlindDown('divBlind1');">Einblenden</a>
<div id="divBlind1" style="border:1px solid #000000; width:300px; height:100px;
background-color:#0000FF; color:#FFFFFF;" >
Ich bin ein div-Element
</div>
Beispiel - BlindUp und BlindDown
Dieser Effekt lässt ebenfalls ein Element von oben herab- bzw. nach oben hinauffahren. Der Unterschied zu den Blind-Effekten ist, das sich der Inhalt des Containers mitbewegt.
Effect.SlideDown('Element', {duration:3});
Das folgende Beispiel enthält wiederum beide Effekte. Zu beachten ist hier, dass ein zusätzliches div-Element nötig ist,das den Content enthält.
<a href="Javascript:void(0);" onclick="new Effect.SlideUp('divSlide1');">Ausblenden</a> -
<a href="Javascript:void(0);" onclick="new Effect.SlideDown('divSlide1');">Einblenden</a>
<div id="divSlide1" style="border:1px solid #000000; width:300px; height:100px;
background-color:#0000FF; color:#FFFFFF;" >
<div>Ich bin ein div-Element</div>
</div>
Beispiel - SlideUp und SlideDown
Achtung! Im Internet Explorer 6 dürfte ein Fehler sein... TODO
Lässt ein Element 'pulsieren', das heißt die Deckkraft des Elements öfters hintereinander abschwächen und wieder verstärken.
Effect.Pulsate('Element', [{Optionen}]);
Dieser Effekt unterstützt folgende optionale Parameter:
| Parameter | Beschreibung |
|---|---|
| duration | Dauer des Effektes |
| from | Wert der Deckkraft zwischen 0 und 1. Für einen nicht so harten, milderen Übergang einen höheren Parameter wählen. |
| pulses | Bestimmt, wie oft das Element pulsiert |
Das erste Beispiel zeigt den Effekt mit den Standardparametern:
<a href="Javascript:void(0)" onclick="new Effect.Pulsate('divPulsate1');">Pulsieren</a>
<div id="divPulsate1" style="width:300px; height:100px; background-color:#ff0000;" >
<div>Ich bin ein div-Element</div>
</div>
Beispiel - Effect.Pulsate
Ein Element verschwindet in der linken oberen Ecke.
Effect.Squish('Element', [{Optionen}]);
Der Effekt mit Standardparametern:
<a href="Javascript:void(0);" onclick="new Effect.Squish('divSquish1');">Verschwinden</a>
<div id="divSquish1" style="width:300px; height:100px; border:1px solid #000;
background-color:#0000FF; color:#FFFFFF;" >
<div>Ich bin ein div-Element</div>
</div>
Bei diesem Effekt wird das Element zuerst nach oben hin verkleinert, dann nach links. Auch dieser Effekt wird wie gehabt aufgerufen:
Effect.Fold('Element', [{Optionen}]);
Beispiel:
<a href="Javascript:void(0);" onclick="new Effect.Fold('divFold1');">Verschwinden</a>
<div id="divFold1" style="width:300px; height:100px; border:1px solid #000;
background-color:#0000FF; color:#FFFFFF;;" >
Ich bin ein div
</div>
Lässt ein Element von der Mitte aus erscheinen oder verschwinden.
Effect.Grow('Element', [{Optionen}]);
Ein Beispiel:
<a href="Javascript:void(0);" onclick="new Effect.Shrink('divShrink1');">Ausblenden</a> -
<a href="Javascript:void(0);" onclick="new Effect.Grow('divShrink1');">Einblenden</a>
<div id="divShrink1" style="border:1px solid #000000; width:300px; height:100px;
background-color:#0000FF; color:#FFFFFF;" >
<div>Ich bin ein div-Element</div>
</div>
(C)Copyright 2007 Thomas Lemmé. Feedback und Fragen auf meinem Blog web/code.
