jQuery 淡入淡出
演示 jQuery fadeIn() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<!-- 点击之后淡入三个不同颜色的div-->
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body>
</html>
演示 jQuery fadeOut() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<!-- 点击之后将三个不同颜色的div淡出-->
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body>
</html>
演示fadeToggle() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<!-- 循环淡入/淡出-->
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body>
</html>
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淡入淡出
html代码: <button id="b1" type="button">淡出</button> <button id=&quo ...
- 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 ...
随机推荐
- Android ViewPager嵌套ViewPager滑动冲突处理方法
dispatchTouchEvent方法用于事件的分发,Android中所有的事件都必须经过这个方法的分发, 然后决定是自身消费当前事件还是继续往下分发给子控件处理.返回true表示不继续分发,事件没 ...
- 【Codeforces Round #452 (Div. 2) D】Shovel Sale
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让N乘2->a 然后看一下位数是多少. 假设有x位(x>=2) 则(0..(a%10-1) ) + (99..9)[x- ...
- HDU——T 1576 A/B
http://acm.hdu.edu.cn/showproblem.php?pid=1576 Time Limit: 1000/1000 MS (Java/Others) Memory Limi ...
- 洛谷——P1101 单词方阵
https://www.luogu.org/problem/show?pid=1101#sub 题目描述 给一nXn的字母方阵,内可能蕴含多个“yizhong”单词.单词在方阵中是沿着同一方向连续摆放 ...
- 微信消息体加解密及EncodingAESKey
公众平台消息体签名及加解密方案概述 1.新增消息体签名验证,用于公众平台和公众账号验证消息体的正确性 2.针对推送给微信公众账号的普通消息和事件消息,以及推送给设备公众账号的设备消息进行加密 3.公众 ...
- 【CS Round #43 C】Rectangle Partition
[链接]点击打开链接 [题意] 有一辆火车,它的长度为L,然后假设这辆车现在随机可能地出现在0..D之间,然后假设它已经耗光了油. 问你它需要走的期望距离是多少. 这里要走的距离指的是车里最近的加油站 ...
- mycat 之datanode datahost writehost readhost 区别（转）
<?xml version="1.0"?> <!DOCTYPE mycat:schema SYSTEM "schema.dtd"> &l ...
- C#调用天气预报网络服务
本程序通过调用网络上公开的天气预报网络服务来显示某个地区三天的天气,使用到的网络服务地址:http://www.webxml.com.cn/WebServices/WeatherWebService. ...
- Android之——图片的内存优化
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46972817 1. 对图片本身进行操作 尽量不要使用 setImageBitmap ...
- Spring Profiles example--转载
原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...