jQuery-Elemente ein- und ausblenden, um den Effekt lebendiger zu machen_jquery

Um einen lebendigeren Effekt zu erzielen, können Sie ein Element aus- oder einblenden, indem Sie in beiden Fällen einfach die Transparenz des Elements im Laufe der Zeit ändern. jQuery bietet drei Funktionen zum Ein- und Ausblenden:

·fadeIn() lässt ein ausgeblendetes Element sichtbar werden. Zuerst erscheint der vom Element eingenommene Platz auf der Seite (was bedeuten kann, dass andere Elemente auf der Seite weggeschoben werden); dann wird das Element nach und nach sichtbar. Wenn das Element bereits auf der Seite sichtbar ist, hat diese Funktion keine Wirkung. Wird kein Geschwindigkeitswert angegeben, wird das Element mit der Einstellung „normal“ (400 Millisekunden) eingeblendet.

·fadeOut() verbirgt ein sichtbares Element, indem es gespenstisch aus dem Blickfeld verschwindet. Wenn das Element bereits auf der Seite ausgeblendet ist, hat diese Funktion keine Wirkung, genau wie die Funktion fadeIn(). Wenn kein Geschwindigkeitswert angegeben wird, wird das Element nach 400 Millisekunden ausgeblendet.

·fadeToggle() kombiniert die Ein- und Ausblendeffekte. Wenn das Element derzeit ausgeblendet ist, wird es eingeblendet; wenn es derzeit sichtbar ist, wird das Element ausgeblendet. Mit dieser Funktion können Sie einen Tooltip auf der Seite anzeigen oder von der Seite verschwinden lassen. Angenommen, Sie haben eine Schaltfläche, auf der das Wort „Anweisungen“ angezeigt wird. Wenn ein Besucher auf die Schaltfläche klickt, wird ein Div mit der Beschreibung eingeblendet; ein erneuter Klick auf die Schaltfläche führt dazu, dass die Beschreibung ausgeblendet wird. Damit das Eingabeaufforderungsfeld jede halbe Sekunde ein- oder ausgeblendet wird, können Sie den Code wie folgt schreiben:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·Die Funktionsweise von fadeTo() unterscheidet sich geringfügig von den anderen beiden Effektfunktionen. Dadurch wird das Bild auf eine bestimmte Transparenz ausgeblendet. Beispielsweise können Sie das Bild halbtransparent ausblenden lassen. Im Gegensatz zu anderen Effekten muss ein Geschwindigkeitswert angegeben werden. Zusätzlich wird ein Wert zwischen 0 und 1 bereitgestellt, um die Transparenz des Elements darzustellen. Um beispielsweise alle Absätze auf 75 % Transparenz auszublenden, können Sie den Code wie folgt schreiben:

$('p').fadeTo('normal'，.75);

Diese Funktion ändert die Transparenz eines Elements, unabhängig davon, ob das Element sichtbar oder unsichtbar ist. Angenommen, Sie möchten ein Element, das derzeit ausgeblendet ist, auf 50 % Transparenz ausblenden. Wenn das Element dann mit show() oder fadeIn() angezeigt wird, wird es mit 50 % Transparenz angezeigt. Wenn Sie ein durchscheinendes Element ausblenden und dann wieder einblenden, wird seine Transparenzeinstellung ebenfalls wiederhergestellt.