Google如何在主页上实现淡出效果？

Question

如果你去google.com,你会发现当鼠标悬停在页面上时,顶部的菜单会慢慢显示.我想知道谷歌用什么来控制褪色效果？

[编辑]因为我不使用jQuery,我不想只是为了使用这个功能

Answer 1

有两种方法.

使用Javascript

适用于大多数浏览器.

使用Javascript逐渐更改元素的CSS opacity属性.对于像jQuery这样的好框架来说这是最简单的,但是自己做起来很简单.

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博客.