Es gibt 17 JQuery-Animationsfunktionen: 1. animate(), um eine benutzerdefinierte Animation auf das ausgewählte Element anzuwenden; 2. hide(), um das ausgewählte Element auszublenden; 3. show(), um das ausgewählte Element anzuzeigen; . Elemente auswählen; 4. fadeOut(), wird verwendet, um Elemente durch Festlegen der Deckkraft auszublenden;
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jQuery-Animationsfunktionen
In der folgenden Tabelle sind alle jQuery-Methoden zum Erstellen von Animationseffekten aufgeführt.
| Methode | Beschreibung |
|---|---|
| animate() | Eine „benutzerdefinierte“ Animation auf das ausgewählte Element anwenden |
| clearQueue() | Alle Warteschlangenfunktionen vom ausgewählten Element entfernen (wird noch ausgeführt) |
| delay() | Legt eine Verzögerung |
| dequeue() | für alle in der Warteschlange befindlichen Funktionen (noch nicht ausgeführt) des ausgewählten Elements fest. |
| dequeue() | Entfernt die nächste in der Warteschlange befindliche Funktion und führt sie dann aus Die Funktion |
| fadeIn() | ändert die Deckkraft der ausgewählten Elemente schrittweise von versteckt nach sichtbar |
| fadeOut() | ändert die Deckkraft der ausgewählten Elemente schrittweise von sichtbar nach versteckt |
| fadeTo() | Das ausgewählte Element schrittweise auf die angegebene Deckkraft ändern |
| fadeToggle() | Zwischen den Methoden fadeIn() und fadeOut() wechseln |
| finish() | Das ausgewählte Element anhalten und entfernen und abschließen Alle Animationen in der Warteschlange slideDown() |
| stop() | |
| toggle() | |
|
下面来介绍一些常用动画函数。 1、animate() animate() 方法执行 CSS 属性集的自定义动画。 该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。 提示：请使用 "+=" 或 "-=" 来创建相对动画。 示例：通过改变元素的高度，对元素应用动画： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>Nach dem Login kopieren
2、hide()、show()和toggle()
示例：隐藏或显示 元素 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>Nach dem Login kopieren 3、slideUp() 、slideDown()和slideToggle()
示例：以滑动方式隐藏 元素 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>Nach dem Login kopieren
4、fadeIn() 、 fadeOut()和fadeToggle()
示例：使用淡入效果显示 元素 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>Nach dem Login kopieren
5、fadeTo() fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>逐渐改变P元素的不透明度</button>
<p>这是一个段落。</p>
</body>
</html>Nach dem Login kopieren ..... 【推荐学习：jQuery视频教程、web前端视频】 |
Das obige ist der detaillierte Inhalt vonWas sind die JQuery-Animationsfunktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
