.div {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.5s,opacity 0.5s linear;
} .div:hover {
visibility: visible;
opacity: 0.5;
transition-delay: 0s;
}

在jquery里,简单调用$('xx').fadeIn();就可完成对element的效果,但是我要求就是使用css3来完成能吗?当然!

在早之前我们会使用以上的代码来完成fade的效果,可现在不需要这么麻烦了

div {
visibility: hidden;
opacity: 0;
transition: all 0.5s linear;
} div:hover {
visibility: visible;
opacity: 0.5;
}

这样就简单多了,不用了解这么多,就在css里说明要在hover时,给上要的效果,有transition来声明要有过渡就可以了

细节与原理

在现代的游览器里,只需给div一个过渡就可以了,在hover时,div:hover也会拥有过渡效果。

如果你要求在hover时,来停个2秒,在离开时直接完成效果,这也可以

div {
visibility: hidden;
opacity: 0;
transition: all 0.5s linear;
} div:hover {
visibility: visible;
transition:all 0.5s linear 2s;
}

当移动点在element上,会直接使用div hover的css,而离开是会使用原本的css。如果hover没有过渡的css,会使用div的过渡css。

CSS 3 过渡效果之jquery 的fadeIn ,fadeOut的更多相关文章

  1. jquery 中fadeIn,fadeOut动画

    我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...

  2. 移动表格行 解决低版本IE fadeIn fadeOut 失效问题

    在维护一个内部使用的web工具的时候,需要在表格里配置参数,并且支持参数列的上下移动,有jQuery-UI工具支持对表格列的拖动,但是此处不追求效果,而且旧系统页面兼容性很差,无奈只能做上下移动的按钮 ...

  3. Zepto.js实现fadeIn,fadeOut功能

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. Zepto的设计目的是提供 jQuery 的 ...

  4. transitionend事件 监听 fadeIn fadeOut 两个方法无效(动画结束时无法执行transitionend里面的代码)

    //下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不 ...

  5. IE中使用jquery的fadeIn()失效的问题

    在自己写的一个轮播组件中遇到一个问题,使用jquery的fadeIn动画时,在IE11中表现不正常,没有渐入的效果. 1.HTML结构 <div class="mainpage-sli ...

  6. ‎Cocos2d-x 学习笔记(11.9) FadeTo FadeIn FadeOut

    1. 用处 FadeTo:由正常变透明,是另两个的父类,不支持reverse()方法.FadeIn:变完全不透明.FadeOut:变完全透明. 2. 使用 FadeTo: GLubyte _toOpa ...

  7. jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()

    fadeIn(),fadeOut(),fadeToggle(),fadeTo() fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来). 语法:$(selector).fade ...

  8. jQuery的fadeIn和fadeOut实现的轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 简单css动画 fadeIn fadeOut flash

    考虑兼容性采用 -webkit- -o- -mos- -ms- @keyframes fadeIn{ 0%{ opacity: 0; display: block; } 100%{ opacity: ...

随机推荐

  1. jQuery对象插件封装步骤

    jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题.甚至很多css兼容性问题,用jQuery写都能解决. 这里是对象插件的封装.当然,封装插件很多,这里 ...

  2. OSG实现场景漫游(转载)

    OSG实现场景漫游 下面的代码将可以实现场景模型的导入,然后在里面任意行走,于此同时还实现了碰撞检测. 源代码下载地址: /* * File : Travel.cpp * Description : ...

  3. iOS 开源库 之 AFNetWorking 2.x

    1. 网络请求的基本知识 2. Get/Post 请求的使用 3. 文件(图片)上传 4. 断点下载 5. 其它使用细节 6. 设计优良的地方

  4. tomcat 安全文件夹(Java之负基础实战)

    tomcat 解析网站的时候,会寻找一个文件叫  WEB-INF 这些文件外部无法访问

  5. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  6. 最简化模型——css3分阶段动画效果(经过实测)

    body {    background: #dcdcdc;    -webkit-animation: colorin 5s; /* chrome调用属性 */    animation: colo ...

  7. endnote X7 加入文献

    endnote可以管理文献,并且在word中方便的添加参考文献. 1.加入文献: 2.导入以后可以创建自己的group,然后把导入的参考文献拖到group里,这样方便在插入参考文献的时候用group名 ...

  8. CCNA网络工程师学习进程(8)访问控制列表ACL

    前面几节我们介绍了路由器的路由配置,接下来几节我们将介绍路由器的高级配置应用,包括ACL.NAT.DHCP.PPP.VPN和远程连接等的配置.     (1)ACL概述:   ACL(Access C ...

  9. Bootstrap入门(十七)组件11:分页与标签

    Bootstrap入门(十七)组件11:分页与标签   1.默认样式的分页 2.分页的大小 3.禁用的分页 4.翻页的效果 5.两端对齐的分页 6. 标签的不同样式 7. 标签的大小   先引入本地的 ...

  10. Nagios 系统监控基本安装配置过程详解

    Nagios 是一款免费的开源 IT 基础设施监控系统,功能强大,灵活性强,能有效监控 Windows.Linux.VMware 和 Unix 主机状态,交换机.路由器等网络设置等.一旦主机或服务状态 ...