Was sind die Animationseffekte in jQuery?-js-Tutorial-php.cn

Was sind die Animationseffekte in jQuery?

清浅

Freigeben： 2018-11-29 09:11:51

Original

6396 Leute haben es durchsucht

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.

Was sind die Animationseffekte in jQuery?

[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();
});

Nach dem Login kopieren

slideUp()

kann durch Höhenänderung von oben nach unten reduziert werden

$("p").slideUp("slow");

Nach dem Login kopieren

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!"）

Nach dem Login kopieren

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!");
});

Nach dem Login kopieren

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!");
});

Nach dem Login kopieren

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!");
});

Nach dem Login kopieren

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!");
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

Kein Effekt hinzugefügt Vorher

Image 11.jpg

Nach dem Hinzufügen von Effekten

Was sind die Animationseffekte in jQuery?

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!