本篇文章我们来看一下利用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视频教程
的方法是什么