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 ...
随机推荐
- STM32W108无线射频模块串行通信接口编程实例
STM32W108无线射频模块UART通信应用实例 基于STM32W108芯片,编写串口測试程序,測试串口通信.完毕PC通过串口与STM32W108进行通信. 开发环境与硬件平台 硬件:STM32W1 ...
- 程序猿必须知道FTP命令
程序猿必须知道FTP命令 文件传输软件的使用格式为:FTP<FTP地址>.若连 接成功.系统将提示用户输入 ...
- Delphi部份函数,命令,属性中文说明
Abort 函数 引起放弃的意外处理 Abs 函数 绝对值函数 AddExitProc 函数 将一过程添加到运行时库的结束过程表中 Addr 函数 返回指定对象的地址 AdjustLineBreaks ...
- 利用Socket进行大文件传输
分类: WINDOWS 最近接触到利用socket进行大文件传输的技术,有些心得,与大家分享.首先看看这个过程是怎么进行的(如下图): 所以,我们需要三个socket在窗体加载的时候初始化: ...
- 【例题 7-6 UVA - 140】Bandwidth
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力做就好. O(8!*26^2) [代码] /* 1.Shoud it use long long ? 2.Have you ev ...
- 字符串中的空格替换问题（Java版）
解决方式一:时间复杂度为O(n^2) 解决方式二:时间复杂度为O(n) 代码实现: package string; public class SpaceStringReplace2 { //len为数 ...
- Altium Designer如何创建类,如何修改线宽
如果线宽还是没有改变,就是因为,有一个默认的class,它的规则优先级要高于PWR
- JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动
本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...
- 最新GitHub账号注册（详细图解）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.简介 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. ...
- linux中关闭程序或进程