特定の時間が経過すると画像がぼやけます

Question

私のページを画像で開きたい場合、その画像を10秒後にフェードアウトします。どのような方法で私はそれを行うことができますか？私がCss3でそれをやり遂げる方法はありますか？あなたがidをフェードアウト（またはJavaScriptからそれを参照するためにいくつかの方法を持っている）する要素を与えてくれたように、長い

Answer 1

：

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 APIから）のjQuery：
  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()を使用することができ、その後、あなたは（などMooToolsのようや他のJavaScriptライブラリ）jqueryのいずれかを使用して、それをフェードアウトすることができたり、クラスを追加することができます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);