CSS 3 过渡效果之jquery 的fadeIn ,fadeOut

.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。

时间: 2024-10-11 12:44:25

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

jquery 中fadeIn,fadeOut动画

我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用相当于:display:none;opcity逐渐变为0 有些时候我们需要实现些特殊的fade效果,就需要对图片层级有个划分.利用z-index和opcity联合使用 jquery 中fadeIn,fadeOut动画

[ jquery 效果 fadeIn([speed,[easing],[fn]]) fadeOut([speed,[easing],[fn]]) ] 此方法用于通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

fadeIn([speed],[easing],[fn]): 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化 fadeOut([speed],[easing],[fn]): 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化 实例: <html lang='zh-cn'>

trick:CSS 3+checkbox实现JQuery的6个基本动画效果

在JQuery中,有六个基本动画函数:show()/hide().fadeIn()/fadeOut().slideUp()/slideDown().这篇文章,就利用CSS3+checkbox实现这六个基本动画. show()/hide()的实现 show()/hide()的实现主要控制元素的display属性. html: <div id="box"> <input type="checkbox" id="sh"/> &l

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

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

//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不会执行的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <st

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

在自己写的一个轮播组件中遇到一个问题,使用jquery的fadeIn动画时,在IE11中表现不正常,没有渐入的效果. 1.HTML结构 <div class="mainpage-slideshow-top outerbox"> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img1.jpg" alt="爆品提前抢 最高减1500元&quo

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件.该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效. 在线预览   源码下载 使用方法 使用该jQuery消息通知框插件需要引入jQuery,notification.js,animate.css和notification.css文件. <link rel='stylesheet' href='css/animate.min.css'> <

CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="

CSS中用javascript或jquery实现透明度的改变

如何用CSS实现背景半透明效果?做过活动页面的可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容. 不过如果你只需求在IE下实现,使用CSS实现透明度有很多方案,这里只是介绍大家通用的方法: 1.  .transparent_class { 2.        filter:alpha(opacity=50);//标准的css透明度,在大部分的标准浏览器Firefox, Safari, and Opera都有效 3