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 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
Bootstrap插件全集
Jul 18 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
javascript中递归的两种写法
Jan 17 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
python编程开发之类型转换convert实例分析
2015/11/13 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
社区七一党员活动方案
2014/01/25 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
医院院务公开实施方案
2014/05/03 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
紧急迫降观后感
2015/06/15 职场文书