jq/css3渐隐渐显效果

css
  1. 1. jquery的渐隐渐显
  2. 2. css3的渐隐渐显

平时一个渐隐渐显的效果,我们首先想到的就是用jq来控制,那么如果对于不用去考虑IE浏览器的情况下,是否用css3效果更佳呢?

jquery的渐隐渐显

1
2
$('div').fadeIn(t) // 渐显效果,t表示完成这个过程的所用时间
$('div').fadeOut(t) // 渐隐效果

css3的渐隐渐显

我的不二选择是transition(Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。)

1
2
3
4
5
6
7
8
9
a{
opacity: 1;
-moz-transition: opacity .8s; /* Firefox 4 */
-webkit-transition: opacity .8s; /* Safari and Chrome */
-o-transition: opacity .8s; /* Opera */
}
a:hover{
opacity: 0;
}

虽然说IE9以上浏览器都支持transition这个属性,但是对于上述代码的展示效果呢,IE浏览器并没有渐隐渐显的效果;而是类似于jq的hide()和show()的显示,没有了过渡效果。所以怎么用,关键看你的网站所需兼容浏览器的程度了。

既然说到这个渐隐渐显的效果,那我就顺带说一下keyframes这个过渡动画,这个keyframes大多数情况下是作为过渡效果展示,你原始的状态是什么?过渡之后还是回归到你的原始状态,很适合位移和放大缩小的效果展示。

本文地址:http://www.myboolke.com/2017/04/04/fadeIn-fadeOut/
如有错误或遗漏,欢迎各码友留言。。。