本文介绍了jQuery中的四种基本动画效果：显示/隐藏、淡入淡出、滑动以及自定义动画。详细讲解了每个动画方法的参数，包括速度、缓动效果和回调函数，并提供了多个综合案例展示如何使用这些动画效果。
jQuery封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。
我们这里就简单介绍一下滑动滑出，隐藏显示，淡出淡入，自定义动画这四种简单的动画方式
参数
不管是显示显示隐藏，滑动，还是淡出淡入，三种方式的参数和效果大致是一样的，这里在分别讲述方式前简述一下参数，若有细节则单独领出来讲
该类方式有三个参数，分别用逗号分开，可以全部省略。但若无任何参数，无动画直接显示
[spped]:指的的速度,可加可不加，通常有两种：
1.三种预定速度之一的字符串
slow:表示缓慢显示
normal：表示一般速度显示
fast：表示快速
2.用数字表示动画时长的毫秒数
不需要任何引号和单位，用数字则为动画时长的毫秒数
[easing]:用来指定切换效果，默认swing
“swing” - 在开头/结尾移动慢，在中间移动快
“linear” - 匀速移动
[fn]:回调函数，在动画完成执行的函数，每个元素执行一次
一、显示隐藏
1.show()
show()方式可以让隐藏的元素显示出来。
2.hiden()
show()方式可以让隐藏的元素隐藏。
1.toggle()
show()方式可以让元素在隐藏和显示两种状态切换。
综合案例
示例代码:
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
}
</style>
<script src="../jquery.min.js"></script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
// 一般情况下不加参数，直接显示隐藏就可以了
$(function() {
// hide()隐藏
$('button').eq(1).click(function() {
$('div').hide("fast", function() {
});
});
// show()显示
$('button').eq(0).click(function()
最低0.47元/天 解锁文章
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
