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模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
JS之相等操作符详解
Sep 13 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
如何用JavaScipt测网速
May 09 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实现MySQL更新记录的代码
2008/06/07 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python中的一些类型转换函数小结
2013/02/10 Python
Python批量转换文件编码格式
2015/05/17 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
用Eclipse写python程序
2018/02/10 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
五一劳动节慰问信
2015/02/14 职场文书
人事任命通知书
2015/04/21 职场文书
医院党建工作总结2015
2015/05/26 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang