jQuery中fadein与fadeout方法用法示例

 更新时间:2016年09月16日 00:48:03   作者:永远爱好写程序  
这篇文章主要介绍了jQuery中fadein与fadeout方法用法,结合实例形式分析了jQuery使用fadein与fadeout方法实现页面元素淡入淡出效果的相关技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jquery学习笔记之无new构建详解

    jquery学习笔记之无new构建详解

    大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式,直接 $('') 进行构造,这也是 jQuery 十分便捷的一个地方。这篇文章主要给大家介绍了关于jquery学习笔记之无new构建的相关资料,需要的朋友们下面来一起看看吧。
    2017-12-12
  • jquery UI Datepicker时间控件的使用方法(终结版)

    jquery UI Datepicker时间控件的使用方法(终结版)

    这篇文章是jquery UI Datepicker时间控件的使用方法终结版,可以说是技术的升华,实现的功能有限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery的运行机制和设计理念分析

    jQuery的运行机制和设计理念分析

    jQuery是一个非常优秀的JavaScript库,与Prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从Web开发实用的角度出发,抛除了其它Lib中一些不实用的东西,为开发者提供了短小精悍的类库。
    2011-04-04
  • jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

    jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

    这篇文章主要介绍了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果,涉及jquery鼠标事件及页面元素动态样式设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    这篇文章主要介绍了jQuery中ScrollTo用法,结合实例形式分析了jQuery中ScrollTo的功能、使用方法与相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

    jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的3D环饼图效果,结合完整实例形式分析了jQuery使用FusionCharts载入xml格式数据绘制图形的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-04-04
  • jquery插件bootstrapValidator表单验证详解

    jquery插件bootstrapValidator表单验证详解

    这篇文章主要为大家详细介绍了jquery插件bootstrapValidator表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法

    使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法

    eval函数可以把一些处理过程序代码进行解析从而达到可以执行的一个状态,本篇文章给大家介绍使用eval处理jqchart jquery折线图返回数据无效的解决办法,对jqchart jquery相关内容感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery插件ajaxFileUpload实现异步上传文件效果

    jQuery插件ajaxFileUpload实现异步上传文件效果

    jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来我们来看下用AjaxFileUpload插件实现文件上传的方法,有需要的小伙伴可以参考下
    2015-04-04
  • jQuery层动画定位滑动效果的方法

    jQuery层动画定位滑动效果的方法

    这篇文章主要介绍了jQuery层动画定位滑动效果的方法,涉及jQuery中animate方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04

最新评论