1.基本动画
（1）show
语法：
$(selector).show(speed,callback)
显示元素
参数：
speed：可选参数，表示速度，可能的值包括：毫秒，"slow"，"normal"，"fast"。
callback：可选参数，show 函数执行完之后，要执行的函数。
（2）hide
隐藏元素，用法和show一样
（3）toggle
语法：
$(selector).toggle(speed,callback,switch)
参数：
前两个参数和show一样
switch：可选，布尔值。规定toggle是否隐藏或显示所有被选元素，True - 显示所有元素，False - 隐藏所有元素，如果设置此参数，则无法使用 speed 和 callback 参数。
2.预制动画
（1）滑动
slideDown：用于向下滑动元素
slideUp：用于向上滑动元素。
slideToggle：可以在 slideDown() 与 slideUp() 方法之间进行切换
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/jquery/jquery-3.1.1.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$(".flip").on("click", function () {
$(".panel").slideToggle();
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
width: 300px;
}
div.panel
{
height:120px;
}
</style>
<div class="panel">
<p>hello world</p>
</div>
<p class="flip">点击这里</p>
</body>
</html>（2）淡入淡出
fadeIn：淡入已隐藏的元素
fadeOut：淡出可见元素
fadeToggle：可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo：方法允许渐变为给定的不透明度
注意：$(selector).fadeTo(speed,opacity,callback)，fadeTo语法不太一样，opecity代表指定的不透明度。
3.自定义动画
（1）animate
语法一：
$(selector).animate(styles,speed,easing,callback)
styles：规定产生动画效果的 CSS 样式和值。
easing：可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swing，linear。扩展插件中提供更多 easing 函数。
语法二：
$(selector).animate(styles,options)
options：可选。规定动画的额外选项。
可能的值：
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
（2）stop
$(selector).stop(stopAll,goToEnd)
停止当前正在运行的动画。
stopAll：可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd：可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。
有些用法我也不是很明白，就等项目中用到再具体研究吧
扫一扫
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
