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程序设计有所帮助。

赞 (0)

相关推荐

  • 浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

    hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出

  • jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)

    复制代码 代码如下: <head> <title></title> <style type="text/css"> #img1 { width:400px; height:500px; } </style> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type=

  • jQuery使用fadein方法实现渐出效果实例

    本文实例讲述了jQuery使用fadein方法实现渐出效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过jQuery的fadein方法控制指定色块逐渐显示的功能 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("

  • 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗

    <div id='test' >fdsfsdf123</div> 如 $('#test1').fadeIn(1000) test 中的英文字符在动画效果结束前会加粗 解决方法: 为test层设上背景颜色

  • jquery 图片Silhouette Fadeins渐显效果

    jquery 图片Silhouette Fadeins渐显效果

    我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化.他们需要更换其主页上的照片.我想这可能是有趣的事情出现了少许的互动. 这可能有不少方法可以做到这个效果,这一个刚刚进入我的头突然出现,我随它而去了.这个想法是有一个作为背景图像的轮廓,然后,在该组所有完全相同的大小与每个乐队成员的4个图像.这些图像默认隐藏.然后,有4个绝对定位的区域上面所在的区域,这是过渡区作用.在jQuery的,我们用他们悬停事件,渐渐显示相应的图像. HTML 正如我所说,只是一个div里面有四个图像和过渡区域.所有具有

  • js模拟jquery的slide和fadeIn和fadeOut功能

    就想了想 jquery是怎么实现的呢,无奈,哥能力差,还不到研究jquery源码的时候.那好吧,自己做个很简陋的版本,呵呵!好像还行,等哥的能力上去了再来优化下 三栏布局 #main1{ margin:20px auto; width:200px; background-color:#6c9; overflow:hidden; } var Animate = { obj : null, itime : 0, flag : 1, maxHeight : 0, _$ : function(id){

  • jQuery动画效果-fadeIn fadeOut淡入浅出示例代码

    复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; c

  • jquery实现翻动fadeIn显示的方法

    本文实例讲述了jquery实现翻动fadeIn显示的方法.分享给大家供大家参考.具体实现方法如下: $(function() { //翻动显示 $("#zuixin div:not(:first)").css("display","none"); var B=$("#zuixin div:last"); var C=$("#zuixin div:first"); setInterval(function()

  • 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"&g

  • jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!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/xhtm

  • jQuery中show与hide方法用法示例

    本文实例分析了jQuery中show与hide方法用法.分享给大家供大家参考,具体如下: <!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"> &l

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery中ajax的post()方法用法实例

    本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • Jquery中find与each方法用法实例

    本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

  • JavaScript中set与get方法用法示例

    本文实例分析了JavaScript中set与get方法用法.分享给大家供大家参考,具体如下: 1.get与set是方法,因为是方法,所以可以进行判断. 2.get是得到 一般是要返回的   set 是设置 不用返回 3.如果调用对象内部的属性约定的命名方式是_age 然后就是几个例子来简单说明一下: var person ={ _name : "chen", age:21, set name(name) {this._name = name;},get name() {return t

  • jQuery中fadeOut()方法用法实例

    本文实例讲述了jQuery中fadeOut()方法用法.分享给大家供大家参考.具体分析如下: 此方法通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数. fadeOut()方法的用法: 此方法可以规定动画效果的持续时间.例如: 复制代码 代码如下: $("div").fadeOut(5000) 以上代码规定div的淡出效果可在5000毫秒(5秒)内完成. 此方法也可以在动画完成后触发一个回调函数.例如: 复制代码 代码如下: $("div&q

随机推荐