特定时间后的图像褪色

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