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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
javascript文本模板用法实例
Jul 31 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
总结js函数相关知识点
Feb 27 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
vue实现底部菜单功能
Jul 24 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 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中绘制图像的一些函数总结
2014/11/19 PHP
php实现倒计时效果
2015/12/19 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
详解Python中for循环的使用方法
2015/05/14 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
Python实现端口检测的方法
2018/07/24 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
优秀教师个人材料
2014/12/15 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle