jquery淡入淡出
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淡入淡出的更多相关文章
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jQuery 淡入淡出
演示 jQuery fadeIn() 方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- jQuery淡入淡出效果
如果是通过鼠标点击事件来触发动画效果可以使用 $("#button").click(function(){ $("#div").stop().fadeToggl ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jquery淡入淡出无延迟代码
<!DOCTYPE html> <html> <head> <script src="jquery.js"></script& ...
- jQuery淡入淡出的轮播图
html结构: <div class="banna"> <ul class="img"> ...
- jQuery 淡入淡出有png图的时候 ie8下有黑色边框
jQuery fadeTo 时ie8 png图片有黑色边框 往带有png图的样式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ...
随机推荐
- Juniper SRX防火墙-NAT学习笔记!
Junos NAT第一部分:SRX NAT介绍第二部分:Source NAT:Interface NAT第三部分:Source NAT:Address Pools第四部分:Destination NA ...
- Anniversary party_树形DP
Description There is going to be a party to celebrate the 80-th Anniversary of the Ural State Univer ...
- HDU 1026
http://acm.hdu.edu.cn/showproblem.php?pid=1026 记录bfs路径,用一个数组记录next前驱的方向,然后递归的时候减回去即可 #include <io ...
- js中 return false
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- 图像和滚动 、 编程规范和Xcode(一)
1 在界面上以各种模式显示图片 1.1 问题 在ios开发中经常需要展示图片以满足需求和美化界面,本案例将学习如何以代码的方式使用UIImageView视图控件来展示图片,如图-1所示: 图-1 1. ...
- ARM异常中断处理
ARM异常中断处理 在ARM体系中,通常有以下3种方式控制程序的执行流程: 在正常程序执行过程中,每执行一条ARM指令,程序计数器寄存器(PC)的值加4个字节:每执行一条Thumb指令,程序计数器寄存 ...
- PAT (Basic Level) Practise:1002. 写出这个数
[题目链接] 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式:在一行内输出n的各 ...
- 7-zip的压缩的时候排除某目录
安装暂且不说了. 看一下帮助. [root@localhost Server]# 7z -Zip [] - Igor Pavlov -- p7zip Version ,Utf16=on,HugeFil ...
- spring学习笔记---第三方SDK(Rest API)和Jaskson的巧用
前言: 其实我以前一直不懂电商, 以及电商中所涉及的业务概念. 对于SKU等名词, 觉得有些玄乎. 对其背后的数据模型, 也有莫名的未知恐惧感: 庞大而理不清头绪. 不过最近有机会接触了微商(有赞), ...
- yii2 文件上传
直接贴代码了 --------------------------------------------------------------------------------------------- ...