jQuery实现动画、消失、显现、渐出、渐入效果示例

本文实例讲述了框架实现动画、消失、显现、渐出、渐入效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta charset=' utf-8 '/script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script title/title script $(function(){ $(但是1).on('click '，function(){ $('img ').隐藏(500);//消失}) ;$(但是2).on('click '，function(){ $('img ').show(5000)；//显现}) ;$(但是3).on('click '，function(){ $('img ').向上滑动(5000)；//滑动消失}) ;$(但是4)。on('click '，function(){ $('img ').下滑(5000);//滑动显现}) ;$(但是5)。on('click '，function(){ $('img ').滑动切换(5000)；//滑动切换（消失后显现，显现后消失) }) ;$(但是6)。on('click '，function(){ $('img ').淡出(5000)；//淡出}) ;$(but7).on('click '，function(){ $('img ').淡入(5000)；//淡入}) ;$(但是8)。on('click '，function(){ $('img ').fadeTo(500，0.5)；//淡化}) ;美元(但是9英镑).on('click '，function(){ $('div ').动画({left:'800px'}，5000)；//移动（需要调整对象的风格属性中位置的值绝对)});}) ;/脚本/头体输入类型='button' id='but1' value='消失/input type=' button ' id='但2 ' value='显现/input type=' button ' id='但3 ' value='滑动消失/input type=' button ' id='但4 ' value='滑动显现/input type=' button ' id='但5 ' value='滑动切换/input type=' button ' id='但6 ' value='淡出/input type=' button ' id='但7 '值='淡入/input type=' button ' id='但8 ' value='淡化/input type=' button ' id='但9 ' value='移动/div style=' position :绝对值； img src=' http :http://演示。JB 51。net/js/2018/html 5-css3-3d-img-flash-codes/images/sjalsdxa k4 eehsg2f 2y 92 rt5 hpe。jpg ' height=' 200 '/div/body/html运行效果（这里使用了本站演示图片加以测试):

这里的方法都可以再嵌套方法。

对象。方法名（延迟时间，函数(){ 0新的方法});

比如，消失后显现

$(但是1).on('click '，function(){ $('img ').hide(500，function(){ $('img ')).show(5000)；}) ;}) ;比如，移动后再移回

美元(但是9英镑).on('click '，function(){ $('div ').动画({left:'800px'}，5000，function(){ $('div ').动画({left:'0px'}，5000)；}) ;}) ;感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于框架相关内容还可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。