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和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
Angular的$http与$location
Dec 26 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
bootstrap表单示例代码分享
May 18 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue-cli的eslint相关用法
Sep 29 Javascript
深入理解javascript中的this
Feb 08 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php中strtotime函数用法详解
2014/11/15 PHP
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
Python urlopen 使用小示例
2008/09/06 Python
Python卸载模块的方法汇总
2016/06/07 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python for和else语句趣谈
2019/07/02 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
出纳岗位职责
2013/11/09 职场文书
总经理助理职责
2014/02/04 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
退休教师追悼词
2015/06/23 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
Golang数据类型和相互转换
2022/04/12 Golang