jQuery实现的淡入淡出与滑入滑出效果示例
时间:2019-04-14
本文章向大家介绍jQuery实现的淡入淡出与滑入滑出效果示例,主要包括jQuery实现的淡入淡出与滑入滑出效果示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果。分享给大家供大家参考,具体如下:
1. 淡入淡出效果:
我们做这样一个实例:
有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery淡入淡出</title> <style> .div{width: 300px;height: 300px;background-color: red;display: none;} </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ $("#btn").click(function(){ $(".div").fadeIn(); }); $("#btna").click(function(){ $(".div").fadeOut(); }); }); </script> </head> <body> <input type="button" id="btn" value="点击淡入"/> <input type="button" id="btna" value="点击淡出"/> <div class="div"> 我是一个div块哦!!!!! </div> </body> </html>
运行效果:
2. 滑入滑出效果:
我们做这样一个实例:
有两个按钮,点击滑入,有一个div层滑入,点击滑出,div层滑出:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery滑入滑出</title> <style> .div{width: 300px;height: 300px;background-color: green;display: none;} </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ $("#btn").click(function(){ $(".div").slideDown(); }); $("#btna").click(function(){ $(".div").slideUp(); }); }); </script> </head> <body> <input type="button" id="btn" value="点击滑入"/> <input type="button" id="btna" value="点击滑出"/> <div class="div"> 我是一个div块哦!!!!! </div> </body> </html>
运行效果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- 使用Python对Instagram进行数据分析
- 解决多标签分类问题(包括案例研究)
- Docker Compose + GPU + TensorFlow = Heart
- Tensorflow生成模型收集: GANs与VAEs
- How to Install Nginx and PHP-FPM on FreeBSD 10
- 使用Apache MXNet分类交通标志图像
- CentOS 6.4 + nginx-1.2.5 + php-5.4.15 + MySQL-5.5.31
- 面试问题 - 只用位操作在ABAP里实现a+b
- JAVA 中异常处理的最佳实践
- webpack 4 升级指北
- 对抗蠕虫 —— 如何让按钮不被 JS 自动点击
- 让你的 git 拥有不同身份
- 购物网站的 redis 相关实现(Java)
- Chrome 常用插件 前端-后端-产品
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 高性能解决线程饥饿的利器 StampedLock
- 前端应该知道的web调试工具——whistle
- 最强大的 CSS 布局 —— Grid 布局
- SAP Spartacus ProductConnector和ProductService实现
- Sorted Adjacent Differences(CodeForces - 1339B)【思维+贪心】
- Redis 发布订阅,小功能大用处,真没那么废材!
- R语言实现生物序列的降维比对
- Tomcat NIO(9)-IO线程-Overall流程和关键类
- 有限元平面四边形等差单元python编程
- 动图演示:手撸堆栈的两种实现方法!
- [Go] 实战项目在线客服GO-FLY -在gin框架使用IP识别库转换IP为城市
- leetcode1552题解【二分+贪心】
- 这三年被分布式坑惨了,曝光十大坑
- 为什么删数据也提示空间不足呢?
- 前端踩坑系列《六》——让人又爱又恨的npm包