html代码:

<button id="b1" type="button">淡出</button>
<button id="b2" type="button">淡入</button>
<button id="b3" type="button">淡入淡出</button>
<button id="b4" type="button">透明度</button>
<div id="div1" style="background:red;width:200px;height:200px">qqqqqqqqqqqqq</div>
<div id="div2" style="background:#00FF00;width:200px;height:200px">eeeeeeeeeeeeeee</div>
<div id="div3" style="background:#0000FF;width:200px;height:200px">gggggggggggggggggg</div>

js代码:

 $(function(){
$("#b1").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("#b2").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#b3").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("#b4").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});

jquery淡入淡出的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  4. jQuery 淡入淡出

    演示 jQuery fadeIn() 方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  5. jQuery淡入淡出效果

    如果是通过鼠标点击事件来触发动画效果可以使用 $("#button").click(function(){ $("#div").stop().fadeToggl ...

  6. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. jquery淡入淡出无延迟代码

    <!DOCTYPE html> <html> <head> <script src="jquery.js"></script& ...

  8. jQuery淡入淡出的轮播图

    html结构: <div class="banna">            <ul class="img">              ...

  9. jQuery 淡入淡出有png图的时候 ie8下有黑色边框

    jQuery fadeTo 时ie8 png图片有黑色边框 往带有png图的样式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ...

随机推荐

  1. UVA11624(bfs)

    题意:给一张图,有火源,有障碍物,剩下的是道路,火源在下一分钟能够让上下左右四个方向的道路也着火,告诉人的位置,问最短时间能逃出去的时间是多少: 思路:一个bfs用来求出所有的火源能蔓延到的地方,另一 ...

  2. mysql的ERROR:1042

    在虚拟机上测试数据库备份功能,需要连接外部机器上的mysql,pdo总是报超时错误! 起初认为是用的mysql账号的域不匹配!后来发现不是因为这个! 在终端中用mysql命令尝试连接,发现返回的错误是 ...

  3. Smart210学习记录-----linux定时器

    1.内核定时器: Linux 内核所提供的用于操作定时器的数据结构和函数如下: (1) timer_list 在 Linux 内核中,timer_list 结构体的一个实例对应一个定时器 1 stru ...

  4. Ecshop安装过程中的的问题:cls_image::gd_version()和不支持JPEG

    在安装Ecshop的时候,遇到两个问题: 1.Strict Standards: Non-static method cls_image::gd_version() should not be cal ...

  5. 第三个sprint第一天

    一.例会人员:李泳江,邵家文,周伟雄,谢洪跃 日期:6月16号   例会内容: 1.更新核心功能 例会地点:宿舍 二.任务展示 编号 名称 时间 已用时间 是否完成 1 画出算法流程图 4小时 4小时 ...

  6. 《JavaScript Ninja》之闭包

    闭包 闭包是什么,它们是如何工作的 闭包 是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域. 即:闭包可以让函数访问所有的变量和函数,只要这些变量和函数存在于该函数声明时 ...

  7. java 中获取文件路径

    方案一: 文件目录如下: 配置文件:firehosetos3sample.properties在src目录下面第一层,与包是一层的 在Getpath_ClassLoader.java类中: Syste ...

  8. 关于kinect的安装与配置工作

    一 关于kinect的安装与配置工作 首先要注意的是,使用kinect进行开发,目前有两种不同的驱动方案,经测试这两种方案的驱动是不能兼容的,所以请务必选定其中一种(最好是卸载另外一种). 方案一:使 ...

  9. 刚查了,Z3795不支持EPT,即WP8开发必须的SLAT,看来只能作为简单的WINDOWS备机了

    刚查了,Z3795不支持EPT,即WP8开发必须的SLAT,看来只能作为简单的WINDOWS备机了,也就只能做做文档编辑,脚本编写之类的. 数据来源 http://ark.intel.com/zh-C ...

  10. js&jquery验证邮箱和手机号是否正确范例

    实现源码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...