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. java作业5

    (一)用你的大数类实现加和减两个功能(乘除阶乘未实现) import java.util.Scanner; import java.io.IOException; import java.io.Inp ...

  2. Windows Store App, Shaken

    Accelerometer _accelerometer; ; public MainPage() { this.InitializeComponent(); _accelerometer=Accel ...

  3. magento添加多个产品到购物车(Add multiple products to cart )

    Step  1app\design\frontend\base\default\template\catalog\product\list.phtml<?php    $_productColl ...

  4. Java NIO UDP DEMO

    今天有人问我Netty的UDP怎么使用,我自己尝试的去写一个Demo,在网上搜索了一下,关于Netty的UDP实现还是很少的,所以,今天写下这篇文章用来记录今天的一个简单Demo实现 不使用Netty ...

  5. selenium执行js报错

    selenium执行js报错 Traceback (most recent call last):    dr.execute_script(js)  File "C:\Python27\l ...

  6. 快速用springmvc搭建web应用-超越昨天的自己系列(10)

    Demo地址:http://pan.baidu.com/s/1sjttKWd 创建命令: mvn archetype:generate -DgroupId=com.witown.open.demo - ...

  7. R 读取clipboard内容 (MAC)

    在mac上,R读取复制的data.很简单,一行命令 read.table(pipe("pbpaste"))

  8. Centos6下DRBD的安装配置

    导读 Distributed Replicated Block Device(DRBD)是一个用软件实现的.无共享的.服务器之间镜像块设备内容的存储复制解决方案.数据镜像:实时.透明.同步(所有服务器 ...

  9. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  10. jq版本1.7以上on方法使用结构

    <script>                        $(function(){                            $(document).on(" ...