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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
javascript回到顶部特效
Jul 30 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
浅谈JS中几种轻松处理'this'指向方式
Sep 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 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
python中bisect模块用法实例
2014/09/25 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python3爬楼梯算法示例
2019/03/04 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
会议欢迎词范文
2015/01/27 职场文书
走近毛泽东观后感
2015/06/04 职场文书
食堂管理制度范本
2015/08/04 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python