Heim > Artikel > Web-Frontend > Was sind die Animationseffekte in jQuery?
Was sind die Animationseffekte in jQuery?
- 清浅Original
- 2018-11-28 14:48:086352Durchsuche
Zu den Animationseffekten in jQuery gehören: slideDown, slideUp usw., um den Gleiteffekt zu erzielen; fadeIn, fadeToggle usw., um den Ein- und Ausblendeffekt zu erzielen
jQuery bietet viele Möglichkeiten, dies auf der Seite zu erreichen. Es gibt viele interessante und unterhaltsame Animationseffekte, und der einfache Programmcode ist bequemer und prägnanter als die Verwendung des ursprünglichen JavaScript-Codes. Heute werde ich mehrere jQuery-Animationen vorstellen Die Bedienungsmethoden werden Ihnen im Artikel ausführlich vorgestellt. Ich hoffe, dass sie für das Lernen aller hilfreich sein werden.
[Empfohlene Kurse: jQuery-Animation]
Gleiteffekt
slideDown()
kann durch Höhenänderungen von unten nach oben zunehmen und versteckte Inhalte gleitend anzeigen
$(".btn2").click(function(){
$("p").slideDown();
});slideUp()
kann durch Höhenänderung von oben nach unten reduziert werden
$("p").slideUp("slow");slideToggle([speed],[easing],[fn])
durch Höhenänderung zu Schalten Sie die Sichtbarkeit aller übereinstimmenden Elemente um
Beispiel: Schieben Sie einen Absatz schnell nach oben oder unten, und dann wird ein Dialogfeld angezeigt
$("p").slideToggle("fast",function(){
alert("hello world!"）Ein- und Ausblenden
fadeIn()
Erzielen Sie den Einblendeffekt aller passenden Elemente, indem Sie die Deckkraftänderung festlegen
Beispiel: Verwenden Sie 200 Millisekunden, um schnell einen Absatz und dann einen Dialog einzublenden Das Feld wird angezeigt
("p").fadeIn("fast",function(){
alert("hello world!");
}); fadeOut()
Erzielen Sie den Ausblendeffekt aller übereinstimmenden Elemente, indem Sie die Deckkraftänderung festlegen
Beispiel: Den Absatz schnell in 200 ausblenden Millisekunden und öffnet dann ein Dialogfeld
$("p").fadeOut("fast",function(){
alert("hello world!");
});fadeTo()
Passt die Deckkraft aller übereinstimmenden Elemente schrittweise an die angegebene Deckkraft an
Passt die Absätze schnell an Transparenz auf 0,25 in 200 Millisekunden, etwa 1/4 Sichtbarkeit, dann erscheint ein Dialogfeld
$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});fadeToggle()
Schalten Sie die Ein- und Ausblendeffekte aller passenden Elemente um Ändern der Deckkraft
Beispiel: Verwenden Sie 200, um einen Absatz in Millisekunden schnell auszublenden und dann ein Dialogfeld aufzurufen
$("p").fadeToggle("fast",function(){
alert("hello world!");
});Fall: Wenn wir mit der Maus auf die Schaltfläche klicken, wird die ausgeblendete Der Inhalt wird angezeigt und ausgeblendet
<body>
<div id="box">
<div id="btn">点击这里，显示或隐藏</div>
<div id="content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架)</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#content").slideToggle("slow");
$("#content").fadeToggle("slow");
});
});
</script>Kein Effekt hinzugefügt Vorher
Nach dem Hinzufügen von Effekten
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Artikel ein gewisses Verständnis der Animationseffekte von jQuery und der Erstellung der gewünschten Animationseffekte erlangen kann.
Das obige ist der detaillierte Inhalt vonWas sind die Animationseffekte in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!