004_淡入淡出效果

1. jQuery淡入淡出方法

1.1. 通过jQuery, 您可以实现元素的淡入淡出效果。

1.2. jQuery拥有下面四种fade方法: fadeIn()、fadeOut()、fadeToggle()和fadeTo()。

2. fadeIn()方法

2.1. fadeIn()方法使用淡入效果来显示被选元素, 假如该元素是隐藏的。

2.2. 语法:

$(selector).fadeIn(speed,callback);

2.3. 参数

2.4. 如果元素已经显示, 则该效果不产生任何变化, 除非规定callback函数。

2.5. 该效果适用于通过jQuery隐藏的元素, 或在CSS中声明display:none的元素(但不适用于visibility:hidden的元素)。

3. fadeOut()方法

3.1. fadeOut()方法使用淡出效果来隐藏被选元素, 假如该元素是隐藏的。

3.2. 语法:

$(selector).fadeOut(speed,callback);

3.3. 参数

3.4. 如果元素已经隐藏, 则该效果不产生任何变化, 除非规定了callback函数。

4. fadeToggle()方法

4.1. fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出, 则fadeToggle()会向元素添加淡入效果。如果元素已淡入, 则fadeToggle()会向元素添加淡出效果。

4.2. 语法:

$(selector).fadeToggle(speed,easing,callback);

4.3. 参数

5. fadeTo()方法

5.1. fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。

5.2. 语法:

$(selector).fadeTo(speed,opacity,callback);

5.3. 参数

6. 例子

6.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jQuery淡入淡出效果</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("p").fadeOut('fast'); });$('#btn2').click(function(){$("p").fadeIn('fast'); });$('#btn3').click(function(){$("p").fadeToggle('fast'); });$('#btn4').click(function(){$("p").fadeOut('slow'); });$('#btn5').click(function(){$("p").fadeIn('slow'); });$('#btn6').click(function(){$("p").fadeToggle('slow', "swing"); });$('#btn7').click(function(){$("p").fadeOut('normal'); });$('#btn8').click(function(){$("p").fadeIn('normal'); });$('#btn9').click(function(){$("p").fadeToggle('normal', "linear"); });$('#btn10').click(function(){$("p").fadeOut(2000); });$('#btn11').click(function(){$("p").fadeIn(2000); });$('#btn12').click(function(){$("p").fadeToggle(2000, "linear"); });$('#btn13').click(function(){$("p").fadeTo('fast', 0.5); });$('#btn14').click(function(){$("p").fadeTo('slow', 0.3); });$('#btn15').click(function(){$("p").fadeTo('normal', 0.1); });$('#btn16').click(function(){$("p").fadeTo(2000, 1); });});</script></head><body><button id="btn1">fast淡出段落</button> <button id="btn2">fast淡入段落</button> <button id="btn3">fast淡出/淡入段落</button><br /><br /><button id="btn4">slow淡出段落</button> <button id="btn5">slow淡入段落</button> <button id="btn6">slow淡出/淡入段落</button><br /><br /><button id="btn7">normal淡出段落</button> <button id="btn8">normal淡入段落</button> <button id="btn9">normal淡出/淡入段落</button><br /><br /><button id="btn10">2s淡出段落</button> <button id="btn11">2s淡入段落</button> <button id="btn12">2s淡出/淡入段落</button><br /><br /><button id="btn13">fast渐变为给定的不透明度</button> <button id="btn14">slow渐变为给定的不透明度</button> <button id="btn15">normal渐变为给定的不透明度</button> <button id="btn16">2s渐变为给定的不透明度</button><p style="width: 300px; height: 300px; background: red;">jQuery淡出淡入和渐变为给定的不透明度</p></body>
</html>

6.2. 效果图

004_淡入淡出效果相关推荐

淡入淡出效果 || 高亮显示案例
淡入淡出效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
C# 仿金山毒霸启动和关闭淡入淡出效果
C# 仿金山毒霸启动和关闭淡入淡出效果原文 C# 仿金山毒霸启动和关闭淡入淡出效果 01 #region 窗体关闭效果 02 03 #region 私有方法 04 [DllImportAttri ...
JQuery:多张图片的淡入淡出效果。
我们要实现一个这样子的一个动画:多张图片在相同的位置淡入淡出,实现图片的轮流展示.具体实现的思路: 使用定时器setInterval方法,setInterval(<要调用的方法>,时间延时 ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
使用Tesseract （OCR）实现简单的验证码识别（C#）+窗体淡入淡出效果
来园子也有一段时间了,一直没时间写点东西,说实话刚开始也不知道写什么,一直以来对验证码识别比较感兴趣,曾经想着自己处理图形实现识别验证码, 不过感觉对我来说太难了,偶然中再网上发现了Tesseract ...
使用C#实现Form窗体的淡入淡出效果
using System.Runtime.InteropServices; public class Win32 { public const Int32 AW ...
【转】C#使用GDI+制作背景颜色淡入淡出效果的按钮
C#使用GDI+制作背景颜色淡入淡出效果的按钮 2010-04-14 来自:CNBLOG 字体大小:[大中小] 摘要:本文介绍C#使用GDI+制作背景颜色淡入淡出效果的按钮,并提供完整的示例和 ...
利用API函数实现图像淡入淡出效果(VB)
利用API函数实现图像淡入淡出效果一般传统的实现两个PictureBox之间图像的淡入淡出效果都需要使用大量的API函数并进行复杂的调色板以及绘图设备(Device Context)的操作 ...

004_淡入淡出效果

004_淡入淡出效果相关推荐

最新文章

热门文章