jQuery Effekte
jQuery kann versteckte, sichtbare, umschaltbare, gleitende und benutzerdefinierte Animationseffekte erstellen.
Probieren Sie es selbst aus
Probiers aus, diesen jQuery Effekt:
CodeW3C.com - führende Website-Technologie-Tutorials
Auf CodeW3C.com kannst du alle erforderlichen Website-Entwicklungstutorials finden.
Klicke hier
Beispiel
- jQuery hide()
- Demonstration der einfachen jQuery hide() Funktion.
- jQuery hide()
- Eine weitere hide() Demonstration. Wie man einen Teil des Textes versteckt.
- jQuery slideToggle()
- Demonstration des einfachen Slide Panel Effekts.
- jQuery fadeTo()
- Demonstration der einfachen jQuery fadeTo() Funktion.
- jQuery animate()
- Demonstration der einfachen jQuery animate() Funktion.
jQuery Verbergen und Anzeigen
Durch die Funktionen hide() und show() unterstützt jQuery das Verbergen und Anzeigen von HTML-Elementen:
Beispiel
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() und show() können beide zwei optionale Parameter: speed und callback setzen.
Syntax:
$.selector.hide(speed,callback) $.selector.show(speed,callback)
speed Die Parameter legen die Geschwindigkeit der Anzeige oder des Versteckens fest. Diese Werte können gesetzt werden: "slow", "fast", "normal" oder Millisekunden.
callback Die Parameter sind die Namen der Funktionen, die nach dem Abschluss von hide oder show ausgeführt werden. Mehr dazu lernst du in den folgenden Kapiteln dieses Tutorials. callback Kenntnisse über die Parameter.
Beispiel
$("button").click(function(){
$("p").hide(1000);
});
jQuery Umschalten
Die jQuery toggle() Funktion verwendet die show() oder hide() Funktion, um den sichtbaren Zustand von HTML-Elementen umzuschalten.
Versteckt sichtbare Elemente und zeigt versteckte Elemente an.
Syntax:
$.selector.toggle(speed,callback)
speed Die Parameter können folgende Werte haben: "slow", "fast", "normal" oder in Millisekunden.
Beispiel
$("button").click(function(){
$("p").toggle();
});
callback Dieser Parameter ist der Name der Funktion, die nach Abschluss der Funktion ausgeführt wird. Mehr über diese Parameter werden Sie in den folgenden Kapiteln dieses Tutorials lernen. callback Kenntnisse über die Parameter.
jQuery Slide-Funktionen - slideDown, slideUp, slideToggle
jQuery verfügt über folgende Slide-Funktionen:
$.selector.slideDown(speed,callback) $.selector.slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed Die Parameter können folgende Werte haben: "slow", "fast", "normal" oder in Millisekunden.
callback Dieser Parameter ist der Name der Funktion, die nach Abschluss der Funktion ausgeführt wird. Mehr über diese Parameter werden Sie in den folgenden Kapiteln dieses Tutorials lernen. callback Kenntnisse über die Parameter.
Beispiel von slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Beispiel von slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
}
Beispiel von slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade-Funktionen - fadeIn(), fadeOut(), fadeTo()
jQuery verfügt über folgende fade-Funktionen:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed Die Parameter können folgende Werte haben: "slow", "fast", "normal" oder in Millisekunden.
In der Funktion fadeTo() opacity Dieser Parameter regelt die Abnahme bis zur angegebenen Transparenz.
callback Dieser Parameter ist der Name der Funktion, die nach Abschluss der Funktion ausgeführt wird. Mehr über diese Parameter werden Sie in den folgenden Kapiteln dieses Tutorials lernen. callback Kenntnisse über die Parameter.
Beispiel von fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Beispiel von fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery benutzerdefinierte Animation
Die Syntax der jQuery-Funktion zur Erstellung benutzerdefinierter Animationen:
$(selector).animate({params},[duration],[easing],[callback])
Der wichtige Parameter ist paramsEs definiert die CSS-Attribute, die zur Erzeugung der Animation verwendet werden. Mehrere solcher Attribute können gleichzeitig eingestellt werden:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Der zweite Parameter ist durationEs definiert die Zeit, die auf die Animation angewendet wird. Der festgelegte Wert ist: "slow", "fast", "normal" oder in Millisekunden.
Beispiel 1
<script type="text/javascript">
$("document").ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Beispiel 2
<script type="text/javascript">
$("document").ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML-Elemente sind standardmäßig statisch positioniert und können nicht verschoben werden.
Um Elemente beweglich zu machen, stellen Sie bitte die CSS-Position auf relative oder absolute ein.
jQuery Effekt - Aus dieser Seite
| Funktion | Beschreibung |
|---|---|
| $(selector).hide() | Verbergen Sie das ausgewählte Element |
| $(selector).show() | Zeigen Sie das ausgewählte Element an |
| $(selector).toggle() | Schalten Sie das ausgewählte Element zwischen Verbergen und Anzeigen um |
| $(selector).slideDown() | Blenden Sie das ausgewählte Element nach unten (anzeigen) |
| $(selector).slideUp() | Blenden Sie das ausgewählte Element nach oben (verstecken) |
| $(selector).slideToggle() | Schalten Sie auf ausgewählten Elementen zwischen nach oben und nach unten wischen |
| $(selector).fadeIn() | Blenden Sie das ausgewählte Element ein |
| $(selector).fadeOut() | Blenden Sie das ausgewählte Element aus |
| $(selector).fadeTo() | Fügen Sie dem ausgewählten Element eine gegebene Transparenz hinzu, indem Sie es ausblenden |
| $(selector).animate() | Führen Sie auf ausgewählten Elementen benutzerdefinierte Animationen aus |
Für ein vollständiges Referenzhandbuch besuchen Sie bitte unsere jQuery Effekt Referenzhandbuch.
