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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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
php分页函数
2006/07/08 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
简单谈谈js的数据类型
2017/09/25 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python操作csv文件实例详解
2017/07/31 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python 中如何获取列表的索引
2019/07/02 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python 支持向量机分类器的实现
2020/01/15 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
会计实习生工作总结的自我评价
2013/10/07 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
答谢词范文
2015/01/05 职场文书
七年级作文之游记
2019/12/11 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
golang特有程序结构入门教程
2021/06/02 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫