jQuery中几种常见的动画效果
（用于对jQuery的笔记学习与复习）
目录
jQuery封装了很多动画效果，最为常见的如下
-
显示隐藏
-
show() -- 显示 hide() -- 隐藏 toggle() --切换
-
-
滑动
-
slideDown() --下拉效果 slideUp() -- 上拉效果 slideToggle() -- 上拉&下拉来回切换滑动
-
-
淡入淡出
-
fadeln() -- 淡入效果 fadeOut() -- 淡出效果 fadeToggle() -- 淡入淡出切换 fadeTo() -- 修改透明度
-
-
自定义动画
-
animate()
-
（一）、显示、隐藏、切换效果
1.1 显示效果 show()
1.1.1 显示语法
show( [speed, [easing],[fn]])
1.1.2 显示参数
show方法中的三个参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（slow、normal、or、fast（默认）或表示动画时长的毫秒值（如：1000/在1s后显示）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear--匀速的”
fn:回调函数，在动画完成时候会执行的函数，每个元素执行一次
1.1.3 显示使用
<button>显示</button>
<div></div>
<script>
$(function () {
//show的参数写法
$("button").click(function () { //对显示按钮做点击事件
//点击后显示div
$("div").show(2000, function () { //参数还可以使用回调函数
alert("div打开啦")
}) //2s之后打开
})
})
</script>（前提是这个元素得先隐藏起来，才能进行显示）
1.2 隐藏效果 hide()
1.2.1 语法
hide ([speed],[easing],[fn])
参数与show同理
[ ]代表参数可写与不写
1.2.2 举例hide()
<button>隐藏</button>
<div></div>
<script>
// hide的参数写法
$(function () {
$("button").click(function () { //对隐藏按钮做点击
//点击后隐藏div
$("div").hide(1000, function () { //参数还可以使用回调函数
alert("隐藏啦")
}) //1s之后隐藏
})
})
</script>1.3 切换效果 toggle()
1.3.1 toggle()语法
toggle ( [speed] , [easing] , [fn] )
参数效果与show和hide同理
1.3.2 举例toggle()在隐藏和显示之中来回切换
<button>切换</button>
<div></div>
<script>
//toggle()的切换效果
$("button").click(function () {
$("div").toggle(2000)
})
//点击切换按钮，在显示和隐藏之间来回切换
</script>（二）、jQuery滑动效果 slide
-
slideDown -- 下拉滑动
-
slideUp -- 上拉滑动
-
slideToggle -- 切换滑动
2.1 下拉滑动 slideDown()
语法规范
slideDown([speed],[easing],[fn])
下拉参数与显示隐藏一致
2.2 上拉滑动slideUp()
语法规范
slideUp([speed],[easing],[fn])
下拉参数与显示隐藏一致
2.3 切换滑动slideToggle()
语法规范
slideToggle([speed],[easing],[fn])
下拉参数与显示隐藏一致
2.4 三种滑动效果的举例
三个按钮，一个div，点击按钮（上拉滑动、下拉滑动、切换滑动）去进行对应的div操作
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () { //按钮1：下拉
//点击下拉Down按钮以后，让div从上往下拉开
$("div").slideDown(5000)
})
$("button").eq(1).click(function () { //按钮2：上拉
//点击上拉Up按钮以后，让div从下往上展开
$("div").slideUp(5000)
})
$("button").eq(2).click(function () { //按钮3：切换
//滑动切换：在上拉和下拉之间做切换效果
$("div").slideToggle()
});
});
</script>（三）、淡入淡出效果 fade
3.1 淡入效果 fadeIn()
语法
fadeIn([speed],[easing],[fn])
参数
参数都可以省略
三个参数与滑动和显示隐藏相同
淡入举例
<button>淡入效果</button>
<div></div>
<script>
$("button").eq(0).click(function () {
//淡入效果
$("div").fadeIn(2000);
})
</script>3.2 淡出效果fadeOut()
语法
fadeOut([speed],[easing],[fn])
参数
参数都可以省略
三个参数与滑动和显示隐藏相同
淡出举例
<button>淡出效果</button>
<div></div>
<script>
$("button").eq(0).click(function () {
//淡出效果
$("div").fadeOut(1000)
})
</script>3.3 淡入淡出切换 fadeToggle()
语法
fadeToggle([speed],[easing],[fn])
参数
参数都可以省略
三个参数与滑动和显示隐藏相同
举例
<button>淡入淡出切换</button>
<div></div>
<script>
$(function () {
$("button").click(function () {
//div盒子在淡入淡出之间来回切换
$("div").fadeToggle()
});3.4 修改透明度fadeTo()
利用渐进方式 调正到 指定的不透明度
语法
fadeTo([speed],opacity,[easing],[fn])
参数
效果参数（比以上多出一个透明度opacity）
opacity:透明度必须写，取值在 0 ~ 1之间
speed：三种预定的速度....
easing：指定切换效果
举例
<button>修改透明度</button>
<div></div>
<script>
$(function () {
$("button").click(function () {
$("div").fadeTo(1000, 0.8)
});
});
</script>注意：两个参数，时间和透明度的取值一定要写！！！
（四）、自定义动画 animate
语法
animate(params,[speed],[easing],[fn])
参数
params：想要更改的样式属性，以对象形式传递，必须写。属性名不可带引号，如果是复合属性则需要采用驼峰命名法如-marginLeft。其余参数可以省略
speed：速度
easing：切换效果
fn：回调函数
举例
有一个button按钮和div，点击按钮移动div，使div斜着走，就是让朝左下走，还可以添加其他的样式
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: 500,
top: 200,
opacity: 0.8, //透明度
borderRadius: "50%" //圆角边框
}, 5000); //5s移动完成
})
})
</script>注意：参数params里面的属性可以在 对象{}中书写，属性不加引号，区分使用逗号，复合属性采用驼峰命名法
（五）、停止动画排队stop
如果我们给一个元素添加鼠标经过和鼠标离开的事件，并且添加下拉和上拉的动画效果
但是当我们在快速的进行鼠标经过和移动元素触发事件时候，下拉和上拉的展开会呈现“排队”的效果（第一个做完动画第二个才做动画，第二个做完第三个才做动画）
但是我们并不需要这种效果，所以我们可以去停止动画的排队
在触发第一个元素的下拉以后换到第二个元素，第一个元素的下拉就终止了
5.1 动画或效果队列
动画或者效果一旦触发就会执行到底，如果多次触发，就会造成多个动画或效果排队执行
即：当触发事件以后，就会排队触发完成，当短时间内多次触发，这个动画就有了一种“排队”效果
5.2 停止排队 stop()
语法
stop()
-
stop()方法用于停止动画/效果
-
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
举例
$(".nav>li").hover(function () {
//只写一个函数，然后用滑动切换slideToggle，这样鼠标经过和离开都会执行切换滑动的效果
$(this).children("ul").stop().slideToggle()
})注意：stop()方法必须写在动画的前面，谁做动画就写在谁的前面！！！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)