Eigenkreationen von jQuery-Effekten
Dieser Artikel ist ein Gemeinschaftsartikel. Alle können ihre Effekte hier posten.
Was ist jQuery?
jQuery ist ein JavaScript-Framework das komplexe Strukturen vereinfacht und browserunabhängig darstellt. Die verschiedenen Animationen und grafischen EFfekte werden durch ein Plug-In für jQuery, namens jQuery-UI verbessert bzw. implementiert.
Anzeige Hier werben
Verschieber
Beschreibung
Dieser Effekt verschiebt durch die Manipulation des linken Außenabstandes ein Element aus dem Sichtbereich des Browsers.
Anwendung
1 2 3 4 5 6 7 8 9 10 11 | $("a.anzeigen").click(function() { // onclick-Event registrieren
$("p").animate({ // Absatz (p) mit Methode "animate" als Animation definieren
marginLeft: "0" // Außenabstand ist 0px
}, 500); // 500 beschreibt die Dauer des Effekts in Millisekunden
});
$("a.verstecken").click(function() {
$("p").animate({
marginLeft: "-1000px" // Außenabstand ist -1000px
}, 500);
});
|
Im Code wird den Elementen "a.anzeigen" und "a.verstecken" der onClick-Event zugewiesen. Durch das Auslösen des Events (Klick auf das Element) wird die Animation mit den definierten Optionen ausgelöst.
1
2
3
4
5 | <a class="anzeigen" href="#">Text anzeigen</a>
<p style="margin-left: -1000px;">
Das hier ist der Text, der aus dem Seitenrand kommt und dort auch wieder verschwindet
<a class="verstecken" href="#">Verstecken</a>
</p>
|
TODO:
- Mehr Effekte
- Eventuell anders strukturieren
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Eigenkreationen von jQuery-Effekten" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Eigenkreationen von jQuery-Effekten" hier bearbeiten.
-
Ich bin Schüler eines Gymnasiums und beschäftige mich in meiner Freizeit seit vielen Jahren mit HTML- und CSS-Programmierung. Außerdem interessiere ich mich für PHP (WordPress, Drupal, ...), Ruby und Ruby on Rails.
-
Patrick Freitag arbeitet als Java-Programmierer und Webworker in einer österreichischen Firma und beschäftigt sich seit ca. 6 Jahren mit der Webentwicklung. Neben der Programmierung in JavaScript, Python und PHP sind auch das Markup und Software Architektur seine Leidenschaft. Er ist auch auf Twitter aktiv.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
doppelter artikel?
kann es sein dass sich der artikel ziemlich mit "effekte mit jquery" überschneidet?
Re: doppelter artikel?
nein, denn bei "effekte mit jquery" werden die grundeffekte erklärt. hier soll nur eine auflistung von selber erstellten effekten sein.
Re: doppelter artikel?
dann könntest du ja noch so etwas wie "Beispiele" oder so in die überschrift einfügen.
Re: doppelter artikel?
hab die überschrift angepasst.
was ist jQuery
Hi,
würde vielleicht noch in ein paar Zeilen für die Leute die es nicht wissen, schreiben, was jQuery überhaupt ist. Ich fühl mich dazu allerdings nicht berufen.
Gruß
Re: was ist jQuery
hmm... könnte ich vielleicht machen, aber ich könnte auch einen Link zur jQuery-Einführung machen
Re: was ist jQuery
Außerdem ist jQuery keine Effect-Library oder ähnliches sondern ein Framework das verschiedene, hin und wieder auch umständliche Dinge (wie z.B DOM-Manipulation) vereinfacht. Es gibt eine Adaption für jQuery die sich jQuery-UI nennt, diese Library (oder Framework) implementiert erst die wirklich "wichtigen" Effektspielereien.
Und wieso bzw. wie erstellst du deine Effekte selbst? Es gibt festgelegte Transitions, API usw. die eben das macht was ein (JS-)Framework machen soll: für dich Code so aufbereiten das du ihn einfach benutzen und in deine Entwicklungsumgebung integrieren kannst.
Du meinst wahrscheinlich das du die Optionen die du customizen kannst (z.B Dauer der Transition, CSS-Styles die gemorphed werden, usw..) wenn du von "Effekte selber machen" sprichst, oder?