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动态操作table(新增,删除相关列信息)
May 23 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
小程序实现列表删除功能
2018/10/30 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
React实现全选功能
2020/08/25 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python基础知识小结之集合
2015/11/25 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
美术专业学生个人自我评价
2013/09/19 职场文书
大学生四个方面的自我评价
2013/09/19 职场文书
家长学校工作方案
2014/05/07 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
环保建议书作文500字
2015/09/14 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python