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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
div模拟选择框示例代码
Nov 03 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
vue插件实现v-model功能
Sep 10 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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简单的会话类代码
2011/08/08 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python单例模式实例分析
2015/01/14 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python 内置函数汇总详解
2019/09/16 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
软件测试面试题
2014/01/05 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
公司合作意向书
2014/04/01 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
开服装店计划书
2014/08/15 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
python+opencv实现目标跟踪过程
2022/06/21 Python