Javascript 谷歌如何在主页上实现淡出效果？

如果你去google.com，你会注意到当你把鼠标放在页面上时，顶部的菜单会慢慢出现。我想知道谷歌用什么来控制褪色效果

---

[编辑]由于我不使用jQuery，我不想仅仅为了使用此功能而包含它

我认为他们会将搜索框以外的元素的初始不透明度设置为零。当mouseover事件被激发时，元素的不透明度逐渐增加到1

编辑：在代码中，它看起来像这样：

var hiddenStuff = document.getElementByClassName("hiddenStuff");

var interval=document.setInterval(function() {
    for (var i=0; i<hiddenStuff.length;i++){
        hiddenStuff[i].style.opacity+=0.1
    }
    if (hiddenStuff[1].style.opacity===1){
        window.clearInterval(interval);
    }
}, 100);

var hiddenStuff=document.getElementByClassName（“hiddenStuff”）；
var interval=document.setInterval（函数（）{
对于（var i=0；i，您可以使用jQuery并在标记上添加onmousemove回调，以淡入id为“mymenu”的隐藏div，类似于：

$("html").one("mousemove", function() {
 $("#mymenu").fadeIn("slow")
});

警告：这是在这里输入的，所以我不知道它是否编译ootb。
有两种方法

Javascript
适用于大多数浏览器

使用Javascript逐渐改变元素的CSS不透明度属性。这对于一个好的框架来说是最容易的，但是你自己做起来很简单

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);
    }
}

例如，请看。
由于跨浏览器的差异，这实际上是一件相当复杂的事情。基本内容如下：

将元素的当前不透明度获取为float
将结束不透明度确定为浮动
确定你的速度-我不知道这应该是什么在原始条件-像.01/毫秒可能
使用
setInterval
来启动一个函数，该函数将不透明度增加您的速率，其中：
setInterval（function（）{myElement.style.opacity=parseFloat（myElement.style.opacity）+0.01；}，1）；
在其中的某个位置，尽管您需要检查是否已到达动画的终点并关闭间隔
我从来没有看过它，但它的唯一逻辑是假设有一个计时器在页面加载时启动，并在该元素的CSS中调整指定元素的alpha或覆盖该元素的另一个元素的不透明度。每一个计时器滴答作响，数字就会被调高/调低一点，文本就会变得有点僵硬e清晰。当达到完全可见度时，计时器关闭

JQuery是一个跨平台兼容包中完成的、随时可用的实现，您只需添加它，启动它，它就完成了

如果你选择不采纳其他答案的建议，你必须自己研究并实施我上面一段中的策略。祝你好运！
@，该示例也适用于Firefox 3.5.：-
演示：纯CSS


你可以使用jQuery FADEIN和FAUDUT功能来达到同样的效果。嗨，我不能走路，但我想轻松地四处走动。因为我不想为轮椅买单，还有什么能让我轻松自在的吗？”谢谢你的建议，希望你能考虑使用jQuery。你可以让谷歌为你服务。这个库很可能会被缓存并在用户机器上随时为您提供：您不需要jQuery，但您考虑过查看源代码或firebug吗？看这里，我发表了一条评论，您也可以！不幸的是，我不能，Marius，我还没有这样的特权。
#someID {
    opacity:0;
    -webkit-transition: opacity 1s linear;
}
#someID:hover {
    opacity:1;
}

</div>

.item {   
  height:150px;
  width:150px;
  border-radius:100%;
  background:skyblue; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    opacity:0.2;
}

.item:hover {
  opacity: 1;
}