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 Plupload上传插件的使用
Apr 19 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php 常用的系统函数
2017/02/07 PHP
php json相关函数用法示例
2017/03/28 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python实现事件驱动
2018/11/21 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
pygame实现五子棋游戏
2019/10/29 Python
Python安装whl文件过程图解
2020/02/18 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
培训主管的岗位职责
2013/11/23 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
就业意向书
2014/07/29 职场文书
公积金接收函格式
2015/01/30 职场文书
英语导游词
2015/02/13 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书