特定时间后淡出图片

Question

我希望我的页面能够以一张图片打开，并且在10秒后淡出。有什么最好的方法可以做到这一点吗？是否可以使用Css3来实现？

- Extelliqent

---

页面的标记是什么？你尝试了什么？ - David Thomas

Answer 1

只要您已经给元素添加了淡出的id（或者有某种方式可以从JavaScript中引用它）：

window.setTimeout(
    function(){
        $('#pictureID').fadeOut('slow');
    },10000);

JS Fiddle演示。

我假设您将图像用作闪屏，是吗？如果是这样，那么您可以使用position:absolute将该图像定位在页面内容上方，然后淡出以显示下方的内容（JS Fiddle演示）。

但是，如果您还希望用户能够悬停在图像上以保持其位置，则可以使用以下内容（与上述内容相同，但进行了一些修改）：

var fadeAnim = window.setTimeout(
    function(){
        $('#i').fadeOut('slow');
    },10000);

$('#i').hover(
    function(){
        window.clearTimeout(fadeAnim);
    },
    function(){
        $(this).fadeOut(500);
    });

JS Fiddle演示。

参考资料：

• JavaScript（来自Mozilla开发者网络的JavaScript资源）：
  • window.setTimeout()。
  • window.clearTimeout()。
• jQuery（来自jQuery API）：
  • fadeOut()。

- David Thomas

Answer 2

setTimeout(function() {
    $('.imgClass').fadeOut('slow')
}, 10000);

- Fabián Heredia Montiel

Answer 3

你需要使用JavaScript来实现这个功能。你可以将JavaScript（我们的jQuery）与CSS3结合使用，但为了解决跨浏览器问题，最好还是使用完整的jQuery。为此，你可以使用load()、delay()和fadeOut()方法。

尝试一下：

$('#yourImg').ready(function(){
$(this).delay(10000).fadeOut();
});

- Jibou

Answer 4

你可以使用 setTimeout() 来延迟淡入的开始，然后你可以使用 jQuery（或其他 JavaScript 库，如 mootools）来淡出它，或者你可以为元素添加一个类，并使用 CSS3 过渡进行转换。由于 jQuery 版本已经发布，我将发布 CSS3 版本。http://jsfiddle.net/Tentonaxe/3Vnt7/ CSS:

#demo {
    transition: opacity 2s ease-in;
    -moz-transition:opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -webkit-transition: opacity 2s ease-in;
    border: 4px solid green;
    background-color: #ededed;
    width: 75px;
    height: 75px;

}
.hidden {
    opacity: 0.0;   
}

HTML：

<div id="demo"></div>

Javascript：

setTimeout(function(){
   document.getElementById('demo').className = "hidden"; 
},10000);

- Kevin B