jQuery 淡入/淡出效果函数用法分析

本文实例讲述了jQuery 淡入/淡出效果函数用法。分享给大家供大家参考,具体如下:

jQuery Fading 方法

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法

$("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法:

$("button").click(function(){
 $("#div1").fadeOut();
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
  • 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

$("button").click(function(){
 $("#div1").fadeToggle();
 $("#div2").fadeToggle("slow");
 $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

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

语法:

$(selector).fadeTo(speed,opacity,callback);
  • 必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
  • 可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法:

$("button").click(function(){
 $("#div1").fadeTo("slow",0.15);
 $("#div2").fadeTo("slow",0.4);
 $("#div3").fadeTo("slow",0.7);
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间: 2020-05-19

基于jquery实现的文字淡入淡出效果

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

jQuery实现首页图片淡入淡出效果的方法

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca

非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】

本文实例总结了非常实用的jQuery代码段.分享给大家供大家参考,具体如下: 检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测其它浏览器. $(document).ready(function() { if (navigator.userAgent.match(/msie/i) ){ alert('I am an old fashioned In

jQuery淡入淡出元素让其效果更为生动

为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度.jQuery提供了3个和淡入淡出相关的函数: ·fadeIn()使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见,则这个函数没有任何效果.如果没有提供一个速度值,元素使用"常规"设置来淡入(400毫秒). ·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它.如果元素在

jQuery 淡入淡出、展开收缩菜单实现代码

效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo

jQuery实现图片文字淡入淡出效果

本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

jquery 淡入淡出效果的简单实现

样式: 复制代码 代码如下: <style type="text/css">      #win {              width: 98%;             position: absolute;                  display: none;          float:left;          } /*控制关闭按钮的位置*/        #close {         margin-left: 155px;         c

jQuery实现的淡入淡出与滑入滑出效果示例

本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery淡入淡出</title> <style> .d

jQuery实现DIV层淡入淡出拖动特效的方法

本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 {     position:absolute;     width:400px;     height:300px;     border

jquery淡入淡出效果简单实例

本文实例讲述了jquery淡入淡出效果实现方法.分享给大家供大家参考,具体如下: 之前理解有一些误区,以为淡入淡出是删除该元素,其实只是把该元素隐藏起来 和 显示出来罢了. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

基于Jquery的淡入淡出的特效基础练习

今天练习了个Jquery淡入淡出的特性代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

基于jquery的淡入淡出选项卡效果代码

经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{dis

jquery实现经典的淡入淡出选项卡效果代码

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

基于jquery实现的树形菜单效果代码

本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

基于jQuery实现淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

基于jQuery的淡入淡出可自动切换的幻灯插件

其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 复制代码 代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jqu

基于jQuery的淡入淡出可自动切换的幻灯插件打包下载

思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路. 其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 点此查看DEMO 点此下载插件 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定

基于JQuery 的消息提示框效果代码

详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 复制代码 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout(messagebox_timer); $("#msgprint").remove(); var m_body = $(this); delay = (typ

基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)

正文:为了使层次分明及便于阅读,  整个解决方案如下: 其中BitmapCutter.Core是图片的服务器端处理程序, 类图为: 简单说明下, 更多说明可查看源码注释 : Cutter为裁剪对象, 用于存储客户端通过AJAX提交的数据. Helper为图片处理类, 包括图片翻转(RotateImage()), 图片裁剪(GenerateBitmap()). Callback为服务器端图片处理类, 通过使用Cutter封装客户端AJAX提交的数据, 然后调用Helper中的方法来完成图片处理.

基于jQuery的Tab选项框效果代码(插件)

复制代码 代码如下: /** * jQuery插件 * Author: purecolor@foxmail.com * Date : 2011-02-25 * Params: * defaults:{ currentClass:当前样式, trigger:触发方式, callBack:回调函数, auto:是否自运行, detay:延迟时间, index:当前位置 * } * Return: null * Note : Tab选项框插件 * */ (function($){ $.fn.exten