Heim > Artikel > Web-Frontend > Was sind die JQuery-Animationsfunktionen?
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> 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> 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> 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> 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> ..... 【推荐学习: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!