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 Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Django进阶之CSRF的解决
2018/08/01 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
python 基于opencv实现图像增强
2020/12/23 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
旅游文化节策划方案
2014/06/06 职场文书
文化大革命观后感
2015/06/17 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书