特定時間後的圖像褪色

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