java fadein_jQuery fadeIn()和fadeOut()方法
在 jQuery 中,如果想要实现元素的淡入与淡出的渐变效果,有以下 3 种方式:
fadeIn() 和 fadeOut();
fadeToggle();
fadeTo()。
本节教程先来介绍 fadeIn() 和 fadeOut() 方法,fadeToggle() 和 fadeTo() 之后介绍。
在 jQuery 中,我们可以使用 fadeIn() 方法来实现元素的淡入效果,可以使用 fadeOut() 方法来实现元素的淡出效果。一般情况下,fadeIn() 和 fadeOut() 这两个方法都是配合起来使用的。
语法:
$().fadeIn(speed, fn)
$().fadeOut(speed, fn)
speed 是一个可选参数,表示动画的速度,单位为毫秒。如果省略参数,则表示采用默认速度。speed 有两种取值,一种是“字符串”,另一种是“数值”,如表 1 所示。
表 1:speed 取值为字符串及对应数值
字符串
数值
slow
200
normal
400(默认值)
fast
600
fn 也是一个可选参数,表示动画执行完成后的回调函数。
举例:
$(function () {
$("#btn_hide").click(function(){
$("img").fadeOut();
})
$("#btn_show").click(function () {
$("img").fadeIn();
})
})
预览效果如图 1 所示。
图 1:fadeIn() 和 fadeOut() 方法的效果
可能有些小伙伴会发现,使用 fadeIn() 和 fadeOut() 方法实现的淡入和淡出效果与使用 show() 和 hide() 方法实现的带动画的显示与隐藏效果几乎是一模一样的。确实,这两种方式很相似。但是我们不要被其表象给蒙蔽了双眼,实际上这两种方式还是有一定区别的。
区别如下:
show() 与 hide():通过改变 height、width、opacity、display 来实现元素的显示与隐藏效果;
fadeIn() 与 fadeOut():通过改变 opacity、display 来实现元素的淡入与淡出效果。
此外,使用这两种方式实现的效果在视觉上也有一定的区别,例如,使用 hide() 方法实现的效果是慢慢缩小来隐藏元素,而 fadeOut() 方法实现的效果是整体淡化直至消失。
java fadein_jQuery fadeIn()和fadeOut()方法相关推荐
- fadeIn()与fadeOut()方法
show()和hide()方法与fadeIn()和fadeOut()方法相比较,相同之处是都是切换元素的显示状态,不同之处在于,前者的动画效果使用元素的width与height属性都发生了变化,而后者 ...
- IE下jquery的fadeIn与fadeOut方法失效的BUG
2019独角兽企业重金招聘Python工程师标准>>> BUG1:绝对定位嵌套绝对定位 这个问题遇到过好多次,因为没有做笔记,所以每次遇到这个问题都要研究半天.好记性不如烂笔头,这话 ...
- Jquery实现轮播图效果(fadeIn()和fadeOut()方法的应用)
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
- fadeOut和fadeIn的使用方法
fadeOut() 方法使用淡出效果来隐藏被选元素. $(".btn2").click(function(){ $("p").fadeOut(); }); fa ...
- fadein和fadeto_jQuery fadeIn,fadeOut,fadeTo
fadein和fadeto jQuery provides an easy way to implement transparency effect in HTML through fadeIn(), ...
- 原生js实现fadein 和 fadeout淡入淡出效果
用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明 ...
- jQuery fadeIn() 、fadeOut()
一.jQuery fadeIn() 方法 使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见, ...
- jQuery之动画系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)
文章目录 show 和 hide fadeIn 和 fadeOut fadeToggle fadeTo slideDown 和 slideUp slideToggle show 和 hide < ...
- 收集两种fadeIn和fadeOut的js原生写法
第一种写法 <script type="text/javascript">window.onload=function(){//定义基本操作类 var operrate ...
- eclipse java调用c 代码吗_linux下通过eclipse开发用java调用c程序的方法
linux下通过eclipse开发用java调用c程序的方法: 1.先建立好java工程并建立java文件如下: public class testso { static { ...
最新文章
- 正则表达式 - 语法
- 马斯克入选美国工程院院士,张宏江博士入选外籍院士
- linux命令free
- Pytorch中的 torch.Tensor() 和 torch.tensor() 的区别
- oracle删除死锁进程
- 如何查询网站的物理服务器,如何查询云服务器和物理服务器 哪一个更好?
- 一晚带货千万,谁在买8000一面的健身镜?
- javascript编辑器
- 提升存储过程的效率,用减少表的更新次数来实现
- PHP中的预定义常量、预定义变量、魔术常量
- pdf拆分成一页一页,pdf拆分方法
- ROS动态IP端口映射
- 华为设备VRRP配置命令
- Unity 判断鼠标点击的是单击还是双击
- Flask 框架(四)— 表单处理
- Linux 安装DockerMysql
- centos7 nvidia显卡安装
- 关于文档中的背景水印无法去除的解决办法
- MySql轻功-存储过程
- python机械臂坐标变换——实现机械臂末端相对移动
热门文章
- android中Uri.parse()用法,调用电话短信浏览器等
- python找钱_python算法之找钱问题
- dubbo服务暴露与注册
- SNS:六度分隔理论
- 瞻博QFX5100系列交换机光模块解决方案
- 中小企业适合引入OA办公系统吗?
- java opencv 图片读取,边缘化,写出图片操作
- 计算机应用后期影音制作,WindowsLive影音制作分步说明.docx
- 微软新的邮件帐户域名 @live.com和@windowslive.com
- php 最常用的内置函数大全