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

Question

如果你去google.com，你会发现在鼠标悬停在页面上时顶部菜单会缓慢出现。我想知道谷歌使用了什么来控制这个淡入效果？

【编辑】由于我不使用jQuery，所以我不想为了使用这个功能而包含它。

- Fonoa

---

你可以使用jQuery的fadeIn和fadeOut函数来实现相同的效果。 - Andre Pena

嗨，我无法行走，但希望能轻松地四处走动。因为我不想购买轮椅，是否有其他什么神奇的东西能让我轻松地移动？ - Yuriy Faktorovich

我希望你考虑使用jQuery。你可以让谷歌为你提供服务，这样库很可能会被缓存并且在用户的机器上随时可用：http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/ - Yuriy Faktorovich

你不想要jQuery，但你考虑过查看源代码或使用Firebug吗？ - Tobu

Yuriy Faktorovich说得对。只有一个更正 - 轮椅是免费的 :) - Ariel

Answer 1

Javascript

适用于大多数浏览器。

使用Javascript逐渐更改元素的CSS不透明度属性。使用像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 blog”页面，了解更多信息。请点击此处。

- Georg Schölly

Answer 2

您可以使用jQuery，在标签上添加一个onmousemove回调函数，用于淡入一个id为“mymenu”的隐藏div，例如：

您可以使用jQuery，在标签上添加一个onmousemove回调函数，用于淡入一个id为“mymenu”的隐藏div，例如：

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

警告：此内容仅供参考，不保证直接编译通过。

- Viktor Klang

Answer 3

我从未查看过它，但可以合理地假设页面在加载时会启动一个计时器，然后调整指定元素的 alpha 值或覆盖其的另一个元素的不透明度，在该元素的 CSS 中进行。每个计时器滴答声，数字都会向上/向下转动一点并且文本变得更加清晰。当达到完全可见性时，计时器将关闭。

JQuery 是跨平台兼容包中这个实现的完成、可使用的版本。你只需添加它，搅拌一下，就完成了。

如果您选择不采纳其他答案的建议，则必须自行研究和实施我前面段落中的策略。祝你好运！

- Carl Smotricz

Answer 4

我认为他们将除搜索框以外的元素的初始不透明度设置为零。当鼠标悬停事件被触发时，元素的不透明度逐渐增加到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);

您可能需要调整参数以获得流畅的动画效果。

- Leonard Ehrenfried

Answer 5

演示：纯CSS http://jsfiddle.net/6QS2a/1/

</div>

CSS：

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

- Gildas.Tambo

Answer 6

这实际上是一件相当复杂的事情，因为不同浏览器之间存在差异。基本步骤如下：

1. 获取元素当前的透明度值（以浮点数表示）。
2. 确定结束时的透明度值（以浮点数表示）。
3. 确定速率 - 我不知道原始术语应该是什么，可能是类似于每毫秒0.01的速率？
4. 使用 setInterval 触发一个函数，按照你设定的速率增加透明度，例如：setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1); 在此过程中，你需要检查是否已经到达动画的终点并关闭 setInterval。

- prodigitalson

Answer 7

@Georg，这个例子在Firefox 3.5上也可以运行。:-)

- Buhake Sindi

---

看这里，我发了一条评论，你也可以发表！ - Marius

很遗憾，我不能这样做Marius，我还没有这样的权限。 - Buhake Sindi