jQuery中fadein与fadeout方法用法示例


Posted in Javascript onSeptember 16, 2016

本文实例讲述了jQuery中fadein与fadeout方法用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnfadeIn").click(function () {
        $("#message").fadeIn(1000);
      });
      $("#btnfadeOut").click(function () {
        $("#message").fadeOut(1000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnfadeIn" type="button" value="淡入div" />
    <input id="btnfadeOut" type="button" value="淡出div" />
  </div>
  <div id="message">
    mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。<br /> 
    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 <br />
    只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件(穿过子元素不会触发)
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 #Javascript
jQuery中show与hide方法用法示例
Sep 16 #Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 #Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 #Javascript
AngularJs 动态加载模块和依赖
Sep 15 #Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 #Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
php empty函数 使用说明
2009/08/10 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
对python的输出和输出格式详解
2018/12/08 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Django框架请求生命周期实现原理
2020/11/13 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
员工培训邀请函
2014/01/11 职场文书
会议主持词
2014/03/17 职场文书
高一学生评语大全
2014/04/25 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
《假如》教学反思
2016/02/17 职场文书
python获取对象信息的实例详解
2021/07/07 Python