在 jQuery 中的一些特效中, 可以通过四个方法来实现元素的淡入淡出, 这四个方法分别是: fadeIn(),fadeOut(),fadeToggle() 以及 fadeTo(), 下面为分别为大家介绍各个方式的使用.
jQuery fadeIn() 用于淡入已经被隐藏的元素, 例子:
- lang="en">
- charset="UTF-8">
jQuery 淡入
- *{margin:0;padding:0;} div{width:50px;height:50px;margin:10px;display:none;}
- #div1{background: green;} #div2{background: orange;} #div3{background:
- yellow;}
- type="text/javascript" src="jquery-1.12.0.min.js">
- type="text/javascript">
- $(document).ready(function() {
- $("button").click(function() {
- $("#div1").fadeIn();
- $("#div2").fadeIn(1000);
- $("#div3").fadeIn("slow");
- });
- });
实例演示了 fadeIn() 不同参数的效果.
点击淡入 div 元素.
- id="div1">
- id="div2">
- id="div3">
jQuery fadeOut() 用于淡入已经被隐藏的元素, 例子:
- lang="en">
- charset="UTF-8">
jQuery 淡出
- *{margin:0;padding:0;} div{width:50px;height:50px;margin:10px;} #div1{background:
- green;} #div2{background: orange;} #div3{background: yellow;}
- type="text/javascript" src="jquery-1.12.0.min.js">
- type="text/javascript">
- $(document).ready(function() {
- $("button").click(function() {
- $("#div1").fadeOut();
- $("#div2").fadeOut(1000);
- $("#div3").fadeOut("slow");
- });
- });
实例演示了 fadeIn() 不同参数的效果.
点击淡出 div 元素.
- id="div1">
- id="div2">
- id="div3">
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换.
如果元素已淡出, 则 fadeToggle() 会向元素添加淡入效果.
如果元素已淡入, 则 fadeToggle() 会向元素添加淡出效果.
- lang="en">
- charset="UTF-8">
fadeToggle() 切换
- *{margin:0;padding:0;} div{width:50px;height:50px;margin:10px;} #div1{background:
- green;} #div2{background: orange;} #div3{background: yellow;}
- type="text/javascript" src="jquery-1.12.0.min.js">
- type="text/javascript">
- $(document).ready(function() {
- $("button").click(function() {
- $("#div1").fadeToggle();
- $("#div2").fadeToggle(1000);
- $("#div3").fadeToggle("slow");
- });
- });
实例演示了 fadeToggle() 不同参数的效果.
点击切换 div 元素.
- id="div1">
- id="div2">
- id="div3">
jQuery fadeTo() 方法允许渐变为给定的不透明度 (值介于 0 与 1 之间).
- lang="en">
- charset="UTF-8">
fadeTo 透明度
- *{margin:0;padding:0;} div{width:50px;height:50px;margin:10px;} #div1{background:
- green;} #div2{background: orange;} #div3{background: yellow;}
- type="text/javascript" src="jquery-1.12.0.min.js">
- type="text/javascript">
- $(document).ready(function() {
- $("button").click(function() {
- $("#div1").fadeTo("slow", 0.15);
- $("#div2").fadeTo("slow", 0.4);
- $("#div3").fadeTo("slow", 0.7);
- });
- });
实例演示了 fadeTo 不同参数的效果.
点击 fadeTo 透明度 div 元素.
- id="div1">
- id="div2">
- id="div3">
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/785efee7ec63