Heim >Web-Frontend >js-Tutorial >So erzielen Sie einen Ein- und Ausblendeffekt in jQuery
Es gibt vier Methoden in jQuery: fadeIn(), fadeOut(), fadeToggle(), fadeTo(). Mit diesen vier Methoden können Sie den Ein- und Ausblendeffekt erzielen
Was ich heute mitteilen möchte, ist, wie die Verwendung von jQuery zum Erzielen des Ein- und Ausblendeffekts einen gewissen Referenzeffekt hat. Ich hoffe, dass dies für alle hilfreich sein wird
[Tutorial-Empfehlung: jQuery-Tutorial】
jQuery verfügt über vier Fade-Methoden, nämlich fadeIn(), fadeOut(), fadeToggle(), fadeTo() . Als nächstes werde ich diese im Artikel ausführlich vorstellen. Wie man mit dieser Methode den Ein- und Ausblendeffekt erzielt
Die fadeIn()-Methode
wird hauptsächlich zum Einblenden versteckter Elemente verwendet. Es verfügt über zwei Parameter:
Geschwindigkeit: Gibt die Dauer des Effekts an, die „langsam“, „schnell“ oder ein benutzerdefinierter Zeitwert sein kann. Es handelt sich um einen optionalen Parameter
Callback: Gibt den Namen der Funktion an, die nach Abschluss des Einblendeffekts ausgeführt wird
fadeOut()-Methode
wird hauptsächlich zum Ausblenden des sichtbaren Elements verwendet, sein Parameterwert ist derselbe wie der Wert von fadeIn
fadeToggle()-Methode
Diese Methode kann zwischen FadeIn wechseln () und fadeOut() Methoden
fadeToggle() fügt dem Element einen Einblendeffekt hinzu, wenn es ausgeblendet ist
fadeToggle() fügt dem Element einen Ausblendeffekt hinzu wenn es eingeblendet ist
fadeTo()-Methode
fadeTo()-Methode ermöglicht einen Farbverlauf bis zu einer bestimmten Deckkraft (Wert zwischen 0 und 1)
Zusätzlich zu den Geschwindigkeits- und Rückruffunktionen ist die fadeTo-Methode Darüber hinaus gibt es einen zusätzlichen erforderlichen Deckkraftparameter, der darauf abzielt, die Deckkraft des Fade-Effekts festzulegen
Beispielfreigabe:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img{
width:300px;
height:200px;
position: absolute;
top:40px;
}
button{
position: absolute;
top:10px;
}
</style>
</head>
<body>
<script src="./jquery/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#img").fadeToggle(3000).fadeTo(0.5);
});
});
</script>
<button>点击</button>
<img src="./images/22.jpg" id="img" alt="So erzielen Sie einen Ein- und Ausblendeffekt in jQuery" >
</body>
</html>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels Erfahren Sie, wie Sie den Ein- und Ausblendeffekt mit jQuery erzielen
Hinweis: Dieser Artikel bezieht sich auf den Abschnitt jQuery-Ein- und Ausblendung im jQuery-Tutorial-Handbuch
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Ein- und Ausblendeffekt in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!