Heim >Web-Frontend >Front-End-Fragen und Antworten >So stellen Sie ein, klicken Sie auf div, um nach links zu schieben und in JQuery auszublenden
So stellen Sie ein, klicken Sie auf div, um nach links zu schieben und in JQuery auszublenden
- WBOYOriginal
- 2022-04-24 18:30:291624Durchsuche
Methode: 1. Verwenden Sie „$(“div“).click(function(){})“, um dem div-Element ein Klickereignis hinzuzufügen und die Ereignisverarbeitungsfunktion anzugeben. 2. Verwenden Sie „$(this).animate in der Funktion ({right:"Linker Strichabstand",opacity:'0'},time);" Einfach einstellen.
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.
So stellen Sie das Div so ein, dass es nach links gleitet und ausgeblendet wird, wenn in jquery darauf geklickt wird.
Die animate()-Methode führt eine benutzerdefinierte Animation eines CSS-Eigenschaftensatzes aus.
Diese Methode ändert ein Element durch CSS-Stile von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können.
Nur numerische Werte können animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“).
Tipp: Bitte verwenden Sie „+=" oder „-=", um relative Animationen zu erstellen.
Syntax
(selector).animate({styles},speed,easing,callback)Parameterbeschreibung
Stile Erforderlich. Gibt eine oder mehrere CSS-Eigenschaften/Werte an, die Animationseffekte erzeugen.
Hinweis: Bei Verwendung mit der Methode animate() muss der Eigenschaftsname camelCase lauten: Sie müssen paddingLeft anstelle von padding-left, marginRight anstelle von margin-right usw. verwenden.
Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script type="text/javascript">
$(function () {
$("#panel").click(function () {
$(this).animate({ right: "100px",opacity:'0' }, 2000);
})
})
</script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
#panel {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
<body>
<div id="panel"></div>
</body>
</html>Ausgabeergebnis:
Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo stellen Sie ein, klicken Sie auf div, um nach links zu schieben und in JQuery auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!