js教程

jQuery淡入淡出效果语法教程

我的站长站 2020-08-31 人阅读

实现前端特效的方法很多,最方便的还是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); });


相关推荐
  • jquery教程
  • JS脚本
  • js语法
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file宽高的代码如下,仅在火狐中测试了,其他浏览器兼容性未知。var _URL = window.URL || window.webkitURL;$("#file").change(function (e) { var file, img; if ((file = this.files[0])) { img = new Image(); img.onload = func...

    js教程 128 5年前
  • Jquery实战视频教程 6小时精通Jq
    Jquery实战视频教程 6小时精通Jq

    Jquery实战视频教程 6小时精通Jq,实现小应用,附带教程源码。视频教程列表第7章 自动以Alert第6章 标记完成状态、定时提醒第5章 Task详情第4章 添加及查看Task第3章 细节完善第2章 整体布局第1章 ...

    视频教程 119 4年前
  • JQuery鼠标移动添加删除样式

    JQuery鼠标移动添加删除样式方法,下面为代码案列$("a").hover(function(){ $(this).find("b").show();},function(){ $(this).find("b").hide();})鼠标移到A标签触发事件,下面的B标签显示,后门的function就是鼠标移开隐藏。...

    js教程 109 4年前
  • 去除csdn必须登录复制代码限制JS脚本

    前言现在搜索IT相关的内容都是csdn的结果,下载要登录不说,复制代码也要登录,真是有点麻烦,分享一段去除csdn必须登录复制代码限制JS脚本,可以把页面模式变成可编辑即可随便复制了,附上代码javascript:document.body.contentEditable='true';docume...

    js教程 141 3年前
  • jQuery3.6.0更新说明

    即使存在JSONP错误也返回JSON在以前的版本中,当JSONP请求返回错误时,返回通常仍是一个可执行脚本。3.6.0版本已经更改了默认行为,以尝试在这种情况下执行脚本。当遇到错误时,正常的脚本仍将被跳过。修正一个值得强调的bug是关于将焦点重定向到焦点处理程...

    js教程 193 3年前
  • 自用的JavaScript过滤XSS攻击方法

    什么是XSS攻击XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击。本来缩小应该是CSS,但为了和层叠样式(Cascading Style Sheet,CSS)有所区分,故称XSS。对于攻击者来说,能够让受害者浏览器...

    js教程 104 3年前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不相等。如果两个值在类型转换后不相等,则返回 true,否则返回 false。例如:5 != '5' // false,因为 '5' 会被转换成数字 5,然后 ...

    js教程 9 6天前
  • 正则表达式匹配任意字符语法

    匹配任意字符(.*)匹配任意中文字符 [\u4e00-\u9fa5]匹配双字节字符(包括汉字在内)[^\x00-\xff]匹配空白行\n\s*\r匹配HTML标记<(\S*?)[^>]*>.*?</>|<.*? />匹配首尾空白字符^\s*|\s*$匹配Email地址\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w...

    js教程 71 3年前
  • js四舍五入ofixed和Math.round语法介绍

    本片教程为ofixed和Math.round语法介绍,不废话,只发语法解释和案列,不啰嗦。Math.round()round() 方法可把一个数字舍入为最接近的整数,根据“round”的字面意思“附近、周围”,可以猜测该函数是求一个附近的整数。语法Math.round(x)x 必需。必须是数字。...

    js教程 69 3年前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前