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弹幕效果
May 06 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现手风琴特效
Jan 11 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JS 字符串连接[性能比较]
2009/05/10 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python格式化css文件的方法
2015/03/10 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
python微信公众号之关键词自动回复
2018/06/15 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
家长对孩子的评语
2014/04/18 职场文书
个人课题方案
2014/05/08 职场文书
建筑学专业自荐书
2014/07/09 职场文书
买房协议书范本
2014/10/23 职场文书
先进教师事迹材料
2014/12/16 职场文书
教师辞职信范文
2015/02/28 职场文书
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库