zur pfirsichmelba Startseite. .

jQuery-Plugin: CleanCssAnimation von Alexander Farkas

Dieses Plugin entfernt unnötige und behindernde Inline-Styles, welche durch jQuery-Animationen entstehen. Hierdurch hat der Webdesigner trotz Verwendung von Java-Script-Effekten die Möglichkeit die hohe Flexibilität von CSS zu nutzen und je nach Ausgabegerät (Screen, Projection, aural/Screenreader, Print etc.) zu differenzieren. jQuery entfernt seit Version 1.04 selbst unntöige Styles. Daher tauscht das Plugin nur noch display:none/displayblock durch entsprechende CSS-Klassen aus.

Grund für die geringe Flexibilität ist das jQuery bei Effekten (wie übrigens andere JS-Frameworks auch) umfangreichen Gebrauch von inline-CSS macht und dadurch liquide/elastische Layouts bzw. spezielle, differenzierende Angaben für Druck oder andere Ausgabemedien wesentlich erschwert oder sogar unmöglich macht.

Benutzung

Die alten Animationsaufrufe...

$("p").fadeIn(); // oder $("p").fadeOut("slow",function(){ alert("Animation Done."); });

werden zu...

$('p').CleanCSSAnimation("fadeIn"); // oder $("p").CleanCSSAnimation("fadeOut","slow",function(){ alert("Animation Done."); });

Auf diese Weise werden die angesprochenen Elemente nach der Animation von inline-Stilen gesäubert. Statt style="display:none"/"display:block" wird class="displaynone"/"display" hinzugefügt.

Das Script ist nicht auf eine spezielle Animation festgelegt. Es kann also gut sein, dass das Script auch mit weiteren Animationsplugins funktioniert. (Die meisten Interface-Effekte werden beispielsweise untersützt. Weitere Informationen im Script selbst.)

Das fertige Script

mögliche Alternative

. top