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 ...
随机推荐
- iOS App提交指南-协议、税务和银行业务
App通过审核时,选择的是手动发布,想着等到自己生日那天来发布,当做留个纪念,结果生日当天发布时,由于App属于收费应用,还需要填写协议.税务和银行信息,结果又急急忙忙地去找了下这方面的资料,现在把整 ...
- Java 集合深入理解(7):ArrayList
点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情有点美丽,学学 ArrayList 放松下吧! 什么是 ArrayList ArrayList 是 Java 集合 ...
- HDU 5001
http://acm.hdu.edu.cn/showproblem.php?pid=5001 每次去掉要算的点,求出到达其他点的概率,就是不能到达这个点的概率 开始想去算到达这个点的概率,再去减,不过 ...
- Android FM模块学习之一 FM启动流程
最近在学习FM模块,FM是一个值得学习的模块,可以从上层看到底层. 上层就是FM的按扭操作和界面显示,从而调用到FM底层驱动来实现广播收听的功能. FM启动流程:如下图: 先进入FMRadio.jav ...
- QQ截图取色方法
转自:http://www.oicqzone.com/qqjiqiao/2014110920194.html ctrl+alt+a截图的时候,会显示RGB值.是的,你也许会想,但是我要的是#RRGGB ...
- EasyUI DateBox 按钮自定义添加功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- rsync 使用示例
导读 Rsync(remote sync) 是用于同步某一位置文件和目录到另一位置的有效方法.备份的位置可以在本地服务器或远程服务器.本站之前亦有介绍rsync的安装配置和教程,详看<rsync ...
- HDU 4311 前缀和
Description It has been ten years since TJU-ACM established. And in this year all the retired TJU-AC ...
- safari穿越到chrome
tell application "Safari" set theURL to URL of front document set the clipboard to theURL ...
- 1.PHP站内搜索 分类: PHP开发实例 2015-07-31 22:48 4人阅读 评论(0) 收藏
PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...