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


Posted in jQuery onApril 18, 2018

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

1. 淡入淡出效果:

我们做这样一个实例:

有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com 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>

运行效果:

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

2. 滑入滑出效果:

我们做这样一个实例:

有两个按钮,点击滑入,有一个div层滑入,点击滑出,div层滑出:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com 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-form.js实现异步上传文件
Apr 28 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 #jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
You might like
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php遍历目录方法小结
2015/03/10 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php操作access数据库的方法详解
2017/02/22 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
python实现微信远程控制电脑
2018/02/22 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
助学感谢信范文
2015/01/21 职场文书
趣味运动会开幕词
2015/01/28 职场文书