jQuery – Mehr Dynamik für Ihre Webseite
Kommentare

Animation auf Knopfdruck
Nun ist es ja ganz nett, dass wir Elemente auf unserer Webseite selektieren können, doch wirklich beeindrucken kann das noch nicht. Listing 2 zeigt, wie man auf das click-Ereignis

Animation auf Knopfdruck

Nun ist es ja ganz nett, dass wir Elemente auf unserer Webseite selektieren können, doch wirklich beeindrucken kann das noch nicht. Listing 2 zeigt, wie man auf das click-Ereignis auf ein Element reagiert und dann Meldung ausgibt.

Listing 2
$('div#myelement p').click(function() {
  alert("myelement p geklickt");
});

Damit nun ein wenig Animation in die ganze Sache kommt, erweitern wir die bereits erstellte Datei um ein paar einfache Buttons (Listing 3).

Listing 3
>

    
    Listing 3  

Ich bin ein Text und werde ein- und ausgeblendet!

Wie man an der Funktion toggle sehen kann, ist es möglich, die Geschwindigkeit beim Ein- und Ausblenden zu beeinflussen. Anstatt der Parameter slow, normal und fast kann auch ein numerischer Wert in Millisekunden angegeben werden. Der zweite ebenfalls optionale Parameter ist eine Callback-Funktion, die nach Beendigung der Animation ausgeführt wird. So zeigt die erweiterte hide-Funktion in Listing 4 eine Meldung an, wenn der Text ausgeblendet ist. Das Ausblenden selbst dauert drei Sekunden.

Listing 4
$('#hideButton').click(function() {
    $('#text').hide(3000,function(){
        alert("Text versteckt!");
    });
});
Animierte Transparenz

jQuery erlaubt es, die Transparenz von Elementen animiert zu verändern. Listing 5 zeigt diesen Effekt anhand eines Bildes.

Listing 5
  // Bild einblenden
    $('#fiButton').click(function() {
        $('img').fadeIn();
    });

  // Bild ausblenden
    $('#foButton').click(function() {
        $('img').fadeOut("slow");
    });

  // Bild in 8 Sekunden halbtransparent
    $('#ftButton').click(function() {
        $('img').fadeTo(8000, 0.5);
    });

Die Funktion fadeTo wird im Beispiel über acht Sekunden ausgeführt. Der zweite Parameter kann einen Wert zwischen 0 und 1 annehmen. Dieser steht für die zu erzielende Transparenz. Auch hier kann der optionale dritte Parameter eine Callback-Funktion enthalten. Animationen können leicht miteinander verkettet werden. Die einzelnen Effekte werden dazu einfach aneinander gehängt: $(‚img‘).fadeOut(„slow“).fadeIn(„slow“);.


Das erwartet Euch auf den folgenden Seiten:

  • jQuery UI
  • Hello from jQuery UI
  • Datum selektieren
  • Autocomplete
  • Plug-ins
  • Ausblick auf jQuery Mobile
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -