谷歌是如何实现主页上的褪色效果呢？ [英] How does Google achieve the fading effect on the home page?

问题描述

如果你去到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);
    }
}

纯CSS

只是在一瞬间支持Webkit内核。的

#someID {
    opacity:0;
    -webkit-transition: opacity 1s linear;
}
#someID:hover {
    opacity:1;
}

举一个例子来看看在的Surfin'Safari浏览器博客。

这篇关于谷歌是如何实现主页上的褪色效果呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！