本篇文章我们来看一下怎样利用jquery来实现一些简单的动画效果，通过jquery可以实现简单的显示隐藏、收缩展开、淡入淡出还有简单的自定义动画，希望对大家有帮助！

jQuery 实现简单的动画

1、显示/隐藏

(1)显示：

show(speed,[callback])

speed:效果时长。可取的值：slow、fast、毫秒数

callback:过渡完成后，所执行的方法名称

(2)隐藏：

hide(speed,[callback])

(3)交替：

toggle(speed,[callback]),

若’显示’则’隐藏’;

若’隐藏’则显示

示例如下：

//搭建结构 <button id=”btn_show”>显示图片</button> <button id=”btn_hide”>隐藏图片</button> <button id=”btn_toggle”>交替显示隐藏</button> <img src=”../素材/im2.jpg” alt=”” width=”200″ height=”200″ id=”img1″> <script>$(‘#btn_show’).bind(‘cpck’,function(){ $(‘#img1’).show(3000); // 3秒之内显示 }) $(‘#btn_hide’).bind(‘cpck’, function () { $(‘#img1’).hide(1000); // 1秒之内隐藏 }) $(‘#btn_toggle’).bind(‘cpck’, function () { $(‘#img1’).toggle(); // 显示或隐藏 })</script>

2、向上收缩/向下展开

(1)收缩：

spdUp(speed,[callback])

(2)展开：

spdDown(speed,[callback])

(3)交替：

spdToggle(speed,[callback])

示例如下：

$(‘#btn_up’).bind(‘cpck’,function(){ $(‘#img2’).spdeUp(); //展开 }) $(‘#btn_down’).bind(‘cpck’, function () { $(‘#img2’).spdeDown(); //收缩 }) $(‘#btn_spde’).bind(‘cpck’, function () { $(‘#img2’).spdeToggle(); //收缩展开交替 })

输出结果：

3、淡入/淡出

(1)淡入：

fadeIn(speed,[callback])

(2)淡出：

fadeOut(speed,[callback])

(3)淡入淡出交替：

fadeToggle(speed,[callback])

示例如下：

$(‘#btn_fadeIn’).bind(‘cpck’, function () { $(‘#img3’).fadeIn(); //淡入 }) $(‘#btn_fadeOut’).bind(‘cpck’, function () { $(‘#img3’).fadeOut(); //淡出 }) $(‘#btn_fade’).bind(‘cpck’, function () { $(‘#img3’).fadeToggle(2000); //淡入淡出交替 })

4、自定义动画

$(selector).animate(params,[speed],[easing],[fn])

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

示例如下：

$(function(){ $(‘button’).cpck(function(){ $(‘.bt’).animate({ left:200, top:150, opacity:0.4 },1000) }) })

输出结果：

相关视频教程推荐：jQuery视频教程

以上就是jQuery怎样实现简单的动画效果？（实例详解）的详细内容，更多请关注24小时课堂在线其它相关文章！