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 相关文章推荐
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
Angular的$http与$location
Dec 26 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
Openlayers实现测量功能
Sep 25 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实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP实现简单登录界面
2019/10/23 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python的gevent框架的入门教程
2015/04/29 Python
Python中random模块用法实例分析
2015/05/19 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
庆七一活动方案
2014/01/25 职场文书
师德先进个人材料
2014/12/20 职场文书
酒桌上的开场白
2015/06/01 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers