Google如何在首页上实现褪色效果？ [英] How does Google achieve the fading effect on the home page?

问题描述

如果您访问google.com，您会注意到，当鼠标悬停在页面上方时，顶部的菜单会慢慢显示。我想知道Google使用什么来控制褪色效果？

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?

[edit]因为我不使用jQuery，我不想包括它只是为了使用此功能

[edit] since I don't use jQuery, I don't want to include it just to use this feature

推荐答案

有两种方式。

适用于大多数浏览器。

Works in most browsers.

逐步更改元素的CSS opacity属性Javascript。这是最简单的一个好框架，如 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);
    }
}

Pure CSS

目前仅支持Webkit。

Pure CSS

Only supported in Webkit at the moment.

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

有关示例，请查看 Surfin'Safari blog 。

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