下载鸥 > 网站下载 > 开发教程 > JS/JQuery

jQuery怎样做淡入淡出效果?

256 2020-11-27 15:28:08

收藏

简述

简单的淡入淡出效果,请看源码。

实现前端特效的方法很多,最方便的还是css,当然有些特效还是使用JavaScript脚本比较简单,具体的还得看情况而定。jquery作为高度封装的JavaScript,它给我们提供了一些特效实现方式,我们一起来学习下吧。
 

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

本文地址:https://xzo.com.cn/develop/js/334.html

有帮助,很赞!

信息来源:精准像素
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 246
JS验证手机是否11位的做法
JS验证手机是否11位的做法

在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...

1 298
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 425
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 282
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 265
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 446
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1495
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 727
随机JS/JQuery开发教程
jQuery动态生成字母头像
jQuery动态生成字母头像

[db:描述]各种网站上,什么样的头像都有,可爱风、高冷风、卡通风、商务风。但...

3 391
淘宝电话手机号归属地API查询接口
淘宝电话手机号归属地API查询接口

淘宝电话手机号归属地API查询接口...

11 280
使用Chrome控制台快速查找调试JavaScript运行代码
使用Chrome控制台快速查找调试JavaScript运行代码

Chrome是目前最好用的浏览器,写的网页时可以利用Chrome轻松找到对应的js动作...

0 254
怎样用Javascript做彩色的随机样式标签云?
怎样用Javascript做彩色的随机样式标签云?

修改上面的.tags为你的div选择器就可以了,这里是利用rand随机的透明度,你也可...

16 222
JQuery循环过滤空格+限制字数方法
JQuery循环过滤空格+限制字数方法

JQuery循环过滤空格+限制字数方法,常用来处理AJAX返回的数据种,非常常用。...

0 248
99%的网站面临JavaScript插件攻击风险
99%的网站面临JavaScript插件攻击风险

Tala Security今天发布的一份web安全报告显示,全球Web安全状况急剧恶化,99%的...

8 204
动态生成元素触发事件无效的解决方法
动态生成元素触发事件无效的解决方法

在写JS时,我们在处理动态生成的HTML触发事件时,会无效。那么,动态生成元素触发...

3 299
JQuery倍数索引选择器(n)
JQuery倍数索引选择器(n)

在JQuery中倍数索引其实跟CSS中的方法是一样的,而且标签语法也是一样的,都是...

3 757
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入