jQuery 四大动画效果-阿里云开发者社区

在艰难的原生 JS 路上我们是否做过各种各样的动画效果呢，例如轮播图的动画函数，下拉菜单，但是其实之前的显示与隐藏等小操作都属于动画效果，在 jQuery 领域我们可以将这些显示隐藏放慢100倍 1000倍来让你看清楚其动画效果，这些就用到了显示与隐藏的隐藏参数，下面大家看一下 jQuery 为我们写好了哪些动画函数呢？

在开始前先给各位来一个温馨注意事项：" 动画函数只要触发就一定会执行，这句话在第四板块会提及到，大家多注意 "

jQuery 已封装好的动画函数分类：

显示隐藏效果

滑动效果（事件切换，动画排队现象）

淡入淡出效果

自定义动画

" 此篇文章就带大家了解这些方法，走进更为简便的动画世界！！"

文章目录：

一：显示与隐藏

参数含义：

1.1 显示函数 show

显示效果：

1.2 隐藏函数 hide

隐藏效果：

1.3 显示隐藏切换函数 toggle

显示切换效果：

隐藏切换效果：

二：滑动效果

参数含义：

2.1 下拉函数 slideDown

下拉效果：

2.2 上拉函数 slideUp

上拉效果：

2.3 上拉下拉切换函数 slideToggle

下拉显示效果：

上拉隐藏效果：

三：事件切换

3.1 下拉菜单普通写法：

3.2 下拉菜单切换函数写法：

3.3 下拉菜单最简写法 ( 只有一个函数 )：

四：动画排队现象：

改进下拉菜单（停止了动画排队现象）：

五：淡入淡出效果

参数含义：

5.1 淡入函数 fadeIn

淡入效果：

5.2 淡出函数 fadeOut

淡出效果：

5.3 淡入淡出转换函数 fadeToggle

淡入显示效果：

淡出隐藏效果：

5.4 不透明度改变函数 fadeTo

不透明度切换效果：

六：自定义动画 animate

参数含义:

6.1 自定义动画animate 案例

自定义动画改变效果：

一：显示与隐藏

显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了，那就是 show()，hide()，但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数，其实这两个方法是有隐藏参数的，当然可以带参数可以不带参数。

show ( speed，easing，fn ) ：显示

hide ( speed，easing，fn ) ：隐藏

toggle ( speed，easing，fn ) ：显示隐藏切换

参数含义：

参数 speed easing fn

含义速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写回调函数，在动画执行完后调用动画函数内的内容

1.1 显示函数 show

show ( speed，easing，fn )，可以带参数可以不带参数，可以让元素显示，下面代码的意义为，显示的过程为5000毫秒(5秒) ，显示过后会调用回调函数，并且过程以 swing 的方式过渡

<style>

div{

width: 300px;

height: 300px;

background-color: rgb(255, 146, 146);

display: none;

}

</style>

</head>

<body>

$('div').show(5000,'swing',function(){

alert('show 执行完啦')

})

</script>

</body>

显示效果：

1.2 隐藏函数 hide

hide ( speed，easing，fn )，可以带参数可以不带参数，可以将显示的元素隐藏，以下代码含义为，隐藏的过程为5000毫秒(5秒) ，隐藏过后会调用回调函数，并且过程以 swing 的方式过渡

<style>

div{

width: 300px;

height: 300px;

background-color: rgb(255, 146, 146);

}

</style>

</head>

<body>

$('div').hide(5000,'swing',function(){

alert('hide 执行完啦')

})

</script>

</body>

隐藏效果：

1.3 显示隐藏切换函数 toggle

toggle ( speed，easing，fn ) ，可以带参数可以不带参数，可以切换元素，其实是判断该元素是否显示，如果此元素是显示的，则给它隐藏，如果此元素是隐藏的，则给它显示。

<style>

div{

width: 200px;

height: 200px;

background-color: rgb(255, 146, 146);

}

</style>

</head>

<body>

$('button').click(function(){

$('div').toggle(2000,'swing',function(){

alert('我切换啦')

})

</script>

</body>

显示切换效果：

隐藏切换效果：

二：滑动效果

上拉下拉的最终目的其实也是元素的显示与隐藏，还记得我们的下拉菜案案例吗？当时我们只用了移动光标使下拉盒子直接显示或隐藏，没有动态效果非常的丑陋，我们学习了这一节滑动效果，就可以使你的下拉菜单真正意义上的下拉，实现更完美的动画效果，下面介绍一下几种常用的：

slideDown ( speed，easing，fn ) ：下拉

slideUp ( speed，easing，fn ) ：上拉

slideToggle ( speed，easing，fn ) ：上拉下拉切换

参数含义：

参数 speed easing fn

2.1 下拉函数 slideDown

slideDown ( speed，easing，fn )，可以带参数可以不带参数，可以让元素以下拉的形式慢慢显示出来

<style>

div{

width: 300px;

height: 400px;

background-color: rgb(255, 181, 181);

display: none;

}

</style>

</head>

<body>

$('button').click(function(){

$('div').slideDown(2000,'swing',function(){

alert('我下拉了')

})

</script>

</body>

下拉效果：

2.2 上拉函数 slideUp

slideUp ( speed，easing，fn ) ，可以带参数也可以不带，可以让元素以上拉的形式慢慢隐藏起来

<style>

div{

width: 300px;

height: 400px;

background-color: rgb(255, 181, 181);

}

</style>

</head>

<body>

$('button').click(function(){

$('div').slideUp(2000,'swing',function(){

alert('我上拉了')

})

</script>

</body>

上拉效果：

2.3 上拉下拉切换函数 slideToggle

slideToggle ( speed，easing，fn ) ，可以带参数可以不带参数，可以切换元素上拉下拉，其实是判断该元素是否显示，如果此元素是显示的，则给它上拉隐藏，如果此元素是隐藏的，则给它下拉显示。

<style>

div{

width: 300px;

height: 400px;

background-color: rgb(255, 181, 181);

}

</style>

</head>

<body>

$('button').click(function(){

$('div').slideToggle(2000,'swing',function(){

alert('我切换了')

})

</script>

</body>

下拉显示效果：

上拉隐藏效果：

三：事件切换

有了下拉上拉的基础，我们就可以写一个下拉菜单真正意义上下拉的效果啦，为方便起见我们只写了一个下拉菜单，并且 css 在文章结构中就不展示啦，需要的话在文章末尾自己取哦，所谓事件切换，是 jQuery 为开发效率及减少代码冗余问题得来的一个函数，多用于有去有回的事件，例如鼠标移上移走，点击打开和点击关闭这类双重事件，下面说明一下其用法：

$( 'ele' ) . hover ( function() {触发函数} , function() {移除函数} )

我们先看看不用切换函数的话应该怎么写：

3.1 下拉菜单普通写法：

<body>

</ul>

</div>

$('.banner').mouseover(function(){

$('.mapbox').slideDown(150)

})

$('.banner').mouseout(function(){

$('.mapbox').slideUp(150)

})

</script>

</body>

3.2 下拉菜单切换函数写法：

<body>

</ul>

</div>

$('.banner').hover(function(){

$('.mapbox').slideDown('150')

},function(){

$('.mapbox').slideUp('150')

})

</script>

</body>

3.3 下拉菜单最简写法 ( 只有一个函数 )：

实现原理：里面只写一个函数的话，经过离开都会触发函数从而触发里面的内容

<body>

</ul>

</div>

$('.banner').hover(function(){

$('.mapbox').slideToggle('150')

})

</script>

</body>

四：动画排队现象：

动画函数一旦触发必定执行完毕，意味着如果刚才的下拉菜单我们迅速地经过了十次，那么哪怕你不再移动上去，它也会把这十次给做完，这就是动画排队现象，这明显是不符合我们对下拉菜单效果的期望的，因此我们需要学习如何停止动画排队现象

处理方法：stop ()

注意一定要放在动画函数的前面！！！这个方法就是触发时先停止之前的动画，再执行本次动画函数，其实有些类似于排他思想

改进下拉菜单（停止了动画排队现象）：

$('.banner').hover(function(){

$('.mapbox').stop().slideToggle('150') //注意stop 方法写在动画函数前面，先停止动画，再执行动画

})

</script>

五：淡入淡出效果

淡入淡出最终目的一样也是元素的显示与隐藏，只不过这个更有科技感，像隐身一样消失，再像隐身解除一样地显现出来，下面是淡入淡出的几个方法：

fadeIn ( speed，easing，fn ) ：淡入

fadeOut ( speed，easing，fn ) ：淡出

fadeToggle ( speed，easing，fn ) ：淡入淡出效果切换

fadeTo ( speed，opacity，easing，fn ) ：修改不透明度（speed，opcity 必写）

参数含义：

参数 speed easing fn opacity

含义速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写回调函数，在动画执行完后调用动画函数内的内容不透明度，取值 0-1

5.1 淡入函数 fadeIn

让元素慢慢的显示出来，参数可写可不写

<style>

div{

width: 300px;

height: 300px;

background-color: rgb(255, 188, 188);

display: none;

}

</style>

</head>

<body>

$('button').click(function(){

$('div').fadeIn(2000,'swing',function(){

alert('我淡入啦')

})

</script>

</body>

淡入效果：

5.2 淡出函数 fadeOut

<style>

div{

width: 300px;

height: 300px;

background-color: rgb(255, 188, 188);

}

</style>

</head>

<body>

$('button').click(function(){

$('div').fadeOut(2000,'swing',function(){

alert('我淡出啦')

})

</script>

</body>

淡出效果：

5.3 淡入淡出转换函数 fadeToggle

用于淡入淡出的切换，其实为判断有没有显示或隐藏，如果显示了，就让其淡出隐藏，如果没有显示，就淡入显示

<style>

div{

width: 300px;

height: 300px;

background-color: rgb(255, 188, 188);

}

</style>

</head>

<body>

$('button').click(function(){

$('div').fadeToggle(2000,'swing',function(){

alert('我切换啦')

})

</script>

</body>

淡入显示效果：

淡出隐藏效果：

5.4 不透明度改变函数 fadeTo

用于切换不透明度，参数为 0-1，这个与是 speed 必写参数

<style>

div{

width: 300px;

height: 300px;

background-color: rgb(255, 188, 188);

}

</style>

</head>

<body>

<button>切换不透明度</button>

$('button').click(function(){

$('div').fadeTo(2000,0.3,function(){

alert('我切换不透明度啦')

})

</script>

</body>

不透明度切换效果：

六：自定义动画 animate

我们在原生JS 写过一个动画函数，并且封装在了单独的一个JS 文件中，随用随调即可，但是jQuery也给我们封装好了一个动画函数，并且比原生JS 的更加强大

用法：animate ( params , speed , easing , fn ) params 为必写参数！！！

参数含义:

参数 params speed easing fn

含义写想要更改的样式属性，以对象形式传递，必写速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear 回调函数，在动画执行完后调用动画函数内的内容

6.1 自定义动画animate 案例

例如我们想让元素移动到距离左边 300px，距离上面 200px，宽度增加100px，高度增加 50px，并且不透明度变为 0.7，并要求 2s 完成，完成后弹出 “我完成啦”，用自定义动画就及其简单啦，注意以对象形式传入要改变的属性，并且设置动画函数的必须是元素，不能是文档，例如让整个页面移动时，不能给 $(document) 设置动画函数，而应该给 $('html') 设置动画函数，这点很重要！！！！！！！！！！

<style>

div{

position: absolute;

width: 300px;

height: 300px;

background-color: rgb(255, 188, 188);

}

</style>

</head>

<body>

$('button').click(function(){

$('div').animate(

{

"left":"300px",

"top":"200px",

"opacity":"0.7",

"width":"400px"

},2000,function(){

alert('我完成啦')

})

</script>

</body>

自定义动画改变效果：

至此为止，这就是jQuery的四大基本动画，谢谢大家支持！！

jQuery 四大动画效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景