如果你去到google.com,你注意到在顶部的菜单慢慢出现,一旦你有鼠标放在页面。我想知道是否谷歌用什么来控制褪色效果?
If you go to google.com, you notice the menu on top slowly appears once you have mouse over the page. I was wondering what does Google use to control the fading effect?
,因为我不使用jQuery,我不希望包括它只是使用此功能
[edit] since I don't use jQuery, I don't want to include it just to use this feature
有两种方式。
适用于大多数的浏览器。的
渐渐改变使用Javascript元素的不透明性的CSS属性。这是最容易与像的jQuery 一个很好的框架,但很简单的做自己。
Gradually change the CSS opacity attribute of an element using Javascript. That's easiest with a good framework like jQuery, but is quite simple to do yourself.
function fadeIn() {
var element = document.getElementById("someID");
var newOpacity = element.style.opacity + 0.05;
element.style.opacity = newOpacity;
if (newOpacity < 1) {
window.setTimeout(fadeIn, 50);
}
}
只是在一瞬间支持Webkit内核。的
#someID {
opacity:0;
-webkit-transition: opacity 1s linear;
}
#someID:hover {
opacity:1;
}
举一个例子来看看在的Surfin'Safari浏览器博客。