Question

我希望我的页面打开一张图片，我希望该图片在10秒后淡出。哪种方式是我能做到的最佳方式？有什么方法可以用Css3做到吗？

Answer 1

只要您使用该元素淡出id（或者有一些方法可以从JavaScript引用它）：

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

JS Fiddle demo

我假设您正在使用图像作为闪屏，各种各样的？如果是，那么您可以使用position: absolute将该图片放在页面内容上，然后逐渐淡出以显示下面的内容（JS Fiddle demo）。

但是，如果您还希望用户能够hover覆盖图像，则可以使用以下内容（上述内容，但需要进行一些修改）：

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

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

JS Fiddle demo

参考文献：

JavaScript（来自Mozilla Developer Network's JavaScript resource）：
- window.setTimeout()。
- window.clearTimeout()。
jQuery（来自jQuery API）：
- fadeOut()。

Answer 2

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

Answer 3

你必须使用Javascript来做到这一点。您可以使用CSS3交叉Javascript（我们的jQuery）但是对于跨浏览器问题，您最好在完整的jquery中进行。为此，您可以使用load（），delay（）和fadeOut（）。

尝试：

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

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

特定时间后淡出图像

4 个答案: