显示动画
以下面一个代码示例：
<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery显示动画</title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: #ff6700; ???????????display: none; ???????} ???</style></head><body> ???<div class="box"></div> ???</body></html>显示动画的方式有三种方式
方式一：
???<script type="text/javascript" src="jquery.js"></script> ???<script type="text/javascript"> ???????$(".box").show(); ???</script>解释：使用show()， 不带有参数， 表示让指定的元素直接显示出来。
其实这个方法的底层就是通过display：block;实现。
方式二：
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> ???//在3秒内逐渐显示 ???$(".box").show(3000);</script>解释： 使用show(数值)， 表示在一定时间之内， 逐渐显示出来。
这种方法是通过控制元素的宽高、透明度、display属性来说实现的。
方式三：
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> ??$(function () { ??????$(".box").show("slow"); ??})</script>解释： 通过参数， 使用show(), 参数可以为：
(1) slow(慢)： 600ms;
(2) normal(普通)： 400ms；
(3) fast(快)： 200ms;
通过这种方式调用show()， 也是空过控制元素的宽高、透明度、display属性来实现的。
补充：在动画执行完毕后， 执行另外的程序
???<script type="text/javascript" src="jquery.js"></script> ???<script type="text/javascript"> ???????$(function () { ???????????$(".box").show("faster", function () { ???????????????alert("动画执行完毕") ???????????}); ???????????}) ???</script>解释： 这种方式， 是在show()中加入了一个函数， 当show()执行完毕后， 就会执行此函数。
可以在方式一、方式二、方式三中都可以加入此函数。
jQuery动画之显示动画
原文地址：https://www.cnblogs.com/yang-wei/p/9497541.html