的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 blog。

Answer 2

您可以使用jQuery并在标记上添加onmousemove回调，该标记将ID为“mymenu”的隐藏div删除，例如：

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

警告：这是在这里输入的，所以我不知道它是否编译了ootb。

Answer 3

我从来没有看过它，但假设有一个计时器在页面的加载时启动，并调整指定元素的alpha或覆盖它的另一个元素的不透明度，这是合乎逻辑的。，在该元素的CSS中。每个计时器滴答，数字上下调整一点，文字变得更加清晰。达到完全可见度时，计时器将关闭。

JQuery是一个完整的，可以在跨平台兼容包中实现的。你只需添加它，搅拌它就完成了。

如果您选择不接受其他答案的建议，您必须自己研究并实施我的顶级段落中的策略。祝你好运！

Answer 4

我认为他们将搜索框以外的元素的初始不透明度设置为零。触发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);

您可能需要调整参数以获得平滑的动画。

Answer 5

由于跨浏览器的不同，这实际上是一件相当复杂的事情。基础知识如下：

将元素的当前不可行性设为float。
将结束不透明度确定为float。
确定你的速度 - 我不知道这应该是什么原始术语 - 像.01 / ms这样的东西？
使用setInterval触发一个函数，该函数会根据您的速率增加不透明度：setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1);在某处，您需要检查是否已到达动画的终点并关闭间隔。< / LI>

Answer 6

@ Georg，该示例也适用于Firefox 3.5。： - ）

Answer 7

演示：PURE 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;
}

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

7 个答案:

的Javascript

纯CSS