jQuery实现的淡入淡出与滑入滑出效果示例

本文实例讲述了框架实现的淡入淡出与滑入滑出效果。分享给大家供大家参考，具体如下：

1.淡入淡出效果：

我们做这样一个实例：

有两个按钮，点击淡入，有一个差异层淡入，点击淡出，div层淡出：

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net jQuery淡入淡出/title样式div { width : 300 pxh three : 300 px背景-颜色：红色；显示器：无；}/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js/script script $(function(){ $(' # BTN ')).单击(函数(){ $(').div ').fadeIn()；});$('#btna ').单击(函数(){ $(').div ').淡出()；});});/脚本/头体输入类型='button' id='btn' value='点击淡入/input type=' button ' id=' btna ' value='点击淡出/div class='div '我是一个差异块哦！/div /body/html运行效果：

2.滑入滑出效果：

我们做这样一个实例：

有两个按钮，点击滑入，有一个差异层滑入，点击滑出，div层滑出：

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net jQuery滑入滑出/title样式div { width : 300 pxh three : 300 px背景-颜色：绿色；显示器：无；}/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js/script script $(function(){ $(' # BTN ')).单击(函数(){ $(').div ').向下滑动()；});$('#btna ').单击(函数(){ $(').div ').向上滑动()；});});/脚本/头体输入类型='button' id='btn' value='点击滑入/input type=' button ' id=' btna ' value='点击滑出/div class='div '我是一个差异块哦！/div /body/html运行效果：

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

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