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

点击展示 淡入/淡出 面板


实例

jQuery fadeIn()
演示 jQuery fadeIn() 方法。

jQuery fadeOut()
演示 jQuery fadeOut() 方法。

jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。

jQuery fadeTo()
演示 jQuery fadeTo() 方法。


jQuery Fading 方法

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

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);
});

尝试一下 »

最新文章

  1. 在eclipse中把之前的Tomcat 6删掉,不能再建
  2. windows nslookup、tracert 常用命令
  3. 转 iOS Core Animation 动画 入门学习(一)基础
  4. UISlider显示进度(并且实现图片缩放)
  5. hdu 5258 数长方形 离散化
  6. Rewrite的QSA是什么意思?
  7. Android智能手机屏蔽电话与屏蔽安装软件功能
  8. linq to NHibernate
  9. less基础语法
  10. Sorting Slides(二分图匹配——确定唯一匹配边)
  11. 21.app后端如何高效更新内容
  12. EF学习笔记(十二):EF高级应用场景
  13. ESP8266 HTTP 项目(1)在刻度盘上进行ESP8266 NodeMCU模拟读取的步骤
  14. JQuery之Attr()与Prop()方法
  15. Java基础(1)IntelliJ IDEA入门、常用快捷键和数组操作
  16. Storm介绍及核心组件和编程模型
  17. Mac巧用AirDrop实现大文件传输
  18. 1、QT分析之QApplication的初始化
  19. 看图说说JVM GC收集算法
  20. PMP十五至尊图(第六版)

热门文章

  1. 《深度探索c++对象模型》chapter1关于对象对象模型
  2. 依据 smtp协议的简单golang 的发邮件实现
  3. ASP.NET 中Request.QueryString 中的key
  4. Linux下USB烧写uImage kernel
  5. (转载)PHP isset()函数作用
  6. HDU 5927 Auxiliary Set 【DFS+树】(2016CCPC东北地区大学生程序设计竞赛)
  7. 有关DOM的小总结
  8. 【转】 各种 基于Unity3d 引擎的Android游戏优化 (drawcall)
  9. windows Nginx基本使用方法
  10. js判断是否为手机浏览器