请列举jQuery中常用的实现动画效果的方法,jQuery中支持动画效果的自定义动画

　　在本文中，我们来看看如何使用jquery实现一些简单的动画效果。通过jquery可以实现简单的显示和隐藏，收缩和扩展，淡入淡出和简单的自定义动画。希望对大家有帮助！

　　jQuery 实现简单的动画

　　1、显示/隐藏

　　(1)显示：

　　显示(速度，[回调])速度：效果的持续时间。可用值：慢、快、毫秒

　　回调：转换完成后执行的方法的名称。

　　(2)隐藏：

　　隐藏(速度，[回调])(3)交替：

　　切换(速度，[回调])，如果“显示”，“隐藏”；

　　如果“隐藏”，它将被显示。

　　例子如下：

　　//设置结构

　　按钮id=btn_show 显示图片/按钮

　　Button id=btn_hide 隐藏图片/按钮

　　Button id=btn_toggle 交替显示隐藏/按钮

　　Img=./material/im2 . jpg alt= width= 200 height= 200 id= img 1

　　脚本

　　$(#btn_show )。bind(click ，function(){

　　$(#img1 )。秀(3000)；//3秒内显示

　　})

　　$(#btn_hide )。bind(click ，function () {

　　$(#img1 )。hide(1000)；//在1秒内隐藏

　　})

　　$(#btn_toggle )。bind(click ，function () {

　　$(#img1 )。切换()；//显示或隐藏

　　})

　　/脚本

　　2、向上收缩/向下展开

　　(1)收缩：

　　Sliup(速度，[回调]) (2)展开：

　　SlidDown(速度，[回调])(3)交替：

　　slitoggle(速度，[回调])的示例如下：

　　$(#btn_up )。bind(click ，function(){

　　$(#img2 )。slide up()；//展开

　　})

　　$(#btn_down )。bind(click ，function () {

　　$(#img2 )。slide down()；//收缩

　　})

　　$(#btn_slide )。bind(click ，function () {

　　$(#img2 )。slide toggle()；//收缩和扩张交替进行

　　})输出结果：

　　 3、淡入/淡出

　　(1)淡入：

　　FadeIn(速度，[回调]) (2)淡出：

　　FadeOut(速度，[回调]) (3)淡入淡出交替：

　　fadtoggle(速度，[回调])的示例如下：

　　$(#btn_fadeIn )。bind(click ，function () {

　　$(#img3 )。fade in()；//淡入

　　})

　　$(#btn_fadeOut )。bind(click ，function () {

　　$(#img3 )。fadeOut()；//淡出

　　})

　　$(#btn_fade )。bind(click ，function () {

　　$(#img3 )。fade toggle(2000)；//交替淡入淡出

　　})

　　4、自定义动画

　　$(选择器)的必需params参数。animate (params，[speed]，[easing]，[fn])定义动画的CSS属性。

　　的可选速度参数指定效果的持续时间。它可以采用以下值：“慢”、“快”或毫秒。

　　的可选回调参数是动画完成后要执行的函数的名称。

　　例子如下：

　　$(function(){

　　$(button )。单击(函数(){

　　$(.Bt’)。动画({

　　左：200，

　　顶：150，

　　不透明度：0.4

　　},1000)

　　})

　　})输出结果：

　　相关视频教程推荐：jQuery视频教程以上是jQuery如何实现简单的动画效果。更多详情请关注我们的其他相关文章。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。