本篇文章我们来看一下怎样利用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(\’click\’,function(){ $(\’#img1\’).show(3000); // 3秒之内显示 }) $(\’#btn_hide\’).bind(\’click\’, function () { $(\’#img1\’).hide(1000); // 1秒之内隐藏 }) $(\’#btn_toggle\’).bind(\’click\’, function () { $(\’#img1\’).toggle(); // 显示或隐藏 })</script>
2、向上收缩/向下展开
(1)收缩：
slidup(speed,[callback])
(2)展开：
sliddown(speed,[callback])
(3)交替：
slidtoggle(speed,[callback])
示例如下：
$(\’#btn_up\’).bind(\’click\’,function(){ $(\’#img2\’).slideup(); //展开 }) $(\’#btn_down\’).bind(\’click\’, function () { $(\’#img2\’).slidedown(); //收缩 }) $(\’#btn_slide\’).bind(\’click\’, function () { $(\’#img2\’).slidetoggle(); //收缩展开交替 })
输出结果：
3、淡入/淡出
(1)淡入：
fadein(speed,[callback])
(2)淡出：
fadeout(speed,[callback])
(3)淡入淡出交替：
fadetoggle(speed,[callback])
示例如下：
$(\’#btn_fadein\’).bind(\’click\’, function () { $(\’#img3\’).fadein(); //淡入 }) $(\’#btn_fadeout\’).bind(\’click\’, function () { $(\’#img3\’).fadeout(); //淡出 }) $(\’#btn_fade\’).bind(\’click\’, function () { $(\’#img3\’).fadetoggle(2000); //淡入淡出交替 })
4、自定义动画
$(selector).animate(params,[speed],[easing],[fn])
必需的 params 参数定义形成动画的 css 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：\”slow\”、\”fast\” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
示例如下：
$(function(){ $(\’button\’).click(function(){ $(\’.bt\’).animate({ left:200, top:150, opacity:0.4 },1000) }) })
输出结果：
相关视频教程推荐：jquery视频教程