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 解决“options为空或不是对象”
Dec 22 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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 ci框架验证码实例分析
2013/06/26 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
layui的select联动实现代码
2019/09/28 Javascript
详解Python中expandtabs()方法的使用
2015/05/18 Python
python实现点对点聊天程序
2018/07/28 Python
python之super的使用小结
2018/08/13 Python
python实现flappy bird游戏
2018/12/24 Python
Python多图片合并PDF的方法
2019/01/03 Python
python七夕浪漫表白源码
2019/04/05 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python 忽略文件名编码的方法
2020/08/01 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
简历中求职的个人自我评价
2013/12/03 职场文书
平安建设工作方案
2014/06/02 职场文书
工程部主管岗位职责
2015/02/12 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
JavaScript流程控制(分支)
2021/12/06 Javascript