jQuery基本动画函数
1. 使用基本动画函数
基本的动画函数主要分为show，hide和toggle三个，都提供了无参数的版本，表示不适用动画切换元素的显示状态：
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();提供了两个参数的重载,因为回调函数可以省略,所以可以像开篇实例中使用的, 传入一个数值作为唯一参数,则会在参数规定的时间内用动画效果显示/隐藏元素:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");如果传递了 200, 表示图层会在 200 毫秒内通过渐变的形式显示出来. speed 参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).
三个函数都可以传入回调函数callback,签名如下:
function callback() { this; // dom element}在回调函数中的 this 是执行此函数的 DOM 对象. 会在动画结束时执行。
2. 使用 toggle 函数
toggle函数是功能更强大的函数,可以切换元素的可见状态.我们经常遇到需要使用toggle的情况.比如希望一段文字第一次单击显示弹出层,第二次单击隐藏弹出层.
注意: toggle()这个方法在 jQuery1.8 中宣告过时，在 jQuery1.9 中已经移除；jQuery animation也有一个名为toggle的方法。哪一个被调用取决于传递的参数的设置。
我们将开篇实例稍作修改即可实现这个效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() { //动画速度
var speed = 500; //绑定事件处理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切换弹出层的显示状态
$("#divPop").toggle(speed);
}); //单击空白区域隐藏弹出层
$(document).click(function(event) {
$("#divPop").hide(speed)
}); //单击弹出层则自身隐藏
$("#divPop").click(function(event) {
$("#divPop").hide(speed)
});
}); </script></head><body>
<div>
<button id="btnShow">Display the text prompt</button>
</div>
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html> 
![Front-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Nullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB-Frontend-Tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Praktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
