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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
微信小程序开发摇一摇功能
Nov 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
js 居中漂浮广告
2010/03/21 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
详解python调度框架APScheduler使用
2017/03/28 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
大学生标准推荐信范文
2013/11/25 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
大型晚会策划方案
2014/02/06 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
市场营销方案范文
2014/03/11 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA