博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 效果 - 淡入淡出
阅读量:5328 次
发布时间:2019-06-14

本文共 1751 字,大约阅读时间需要 5 分钟。

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

 

转载于:https://www.cnblogs.com/sprinng/p/5025379.html

你可能感兴趣的文章
web.xml 中加载顺序
查看>>
mysql学习之安装(一)
查看>>
[数据库]关于主键与外键
查看>>
pycharm激活地址
查看>>
hdu 1207 四柱汉诺塔
查看>>
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
查看>>
display:none与visible:hidden的区别
查看>>
我的PHP学习之路
查看>>
【题解】luogu p2340 奶牛会展
查看>>
wnmp安装配置的坑
查看>>
神奇的Scala Macro之旅(二)- 一个实例
查看>>
sicily 1128. DICE
查看>>
e.Row.Attributes.Add
查看>>
SCOPE_IDENTITY()和 SELECT @@IDENTITY 的用法
查看>>
PLoP(Pattern Languages of Programs,程序设计的模式语言)
查看>>
对PostgreSQL的 SPI_prepare 的理解。
查看>>
android"百码"2——基础小知识积累(逐步完善)2015-06-15
查看>>
解决响应式布局下兼容性的问题
查看>>
京东静态网页练习记录
查看>>
Filebeat Config 参数详解:
查看>>