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 ...
随机推荐
- 给VG增加磁盘，给文件目录增加空间
一: #lspv 找到新增加的物理卷(逻辑驱动器,以hdisk8为例). #chdev –l hdisk8 –a pv=yes写入新的物理卷的pvid. #extendvg cwdatavg hdis ...
- Navicat for MySQL 新建查询时，报can't create file ...系统找不到指定的文件夹出现问题
如图点击新建查询报错 解决办法 将这个路径修改一下就ok了
- HDU4825 Xor Sum(贪心+Trie树）
Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...
- (转)Linux下使用rsync最快速删除海量文件的方法
转自 : http://www.ha97.com/4107.html 昨天遇到了要在Linux下删除海量文件的情况,需要删除数十万个文件.这个是之前的程序写的日志,增长很快,而且没什么用.这个时候,我 ...
- Spring学习总结（10）——Spring JMS---三种消息监听器
消息监听器MessageListener 在spring整合JMS的应用中我们在定义消息监听器的时候一共可以定义三种类型的消息监听器,分别是MessageListener.SessionAwareMe ...
- domino web app
近期在做个项目内容是:原企业的OA仅仅能在电脑桌面处理流程,不能在手机上处理审核功能,但随着企业需求,管理者需求在随时使用手机审核文档,达到及时处理文档及流程的及时性. 要求:1) ...
- OpenShift 自定义 OPENSHIFT_DOCUMENT_ROOT 变量，替换网站根目录路径！
OpenShift 自定义 OPENSHIFT_DOCUMENT_ROOT 变量,替换网站根目录路径! 预先定义的子目录 :) DIY: DocumentRoot=${OPENSHIFT_RE ...
- Altium Designer如何调整鼠标形状
在 里面有一个
- （转）c运行库、c标准库、windows API的区别和联系
C运行时库函数C运行时库函数是指C语言本身支持的一些基本函数,通常是汇编直接实现的. API函数API函数是操作系统为方便用户设计应用程序而提供的实现特定功能的函数,API函数也是C语言的函数实现的 ...
- orabbix 报错No suitable driver found for
orabbix报错如下: 2018-07-11 14:35:20,119 [main] ERROR Orabbix - Error on Configurator for database qa ...