jQuery autohide要素が5秒後に

Question

jQueryを使用してフォームがロードされてから5秒後に、Webページの要素を自動的に非表示にすることはできますか？

基本的に、私は5秒後に消えたいと思い

<div id="successMessage">Project saved successfully!</div> 

を持っています。私はjQueryのUIと非表示エフェクトを見てきましたが、私が望むように動作させるのに少し問題があります。

<script type="text/javascript"> 
     $(function() { 
      function runEffect() { 

       var selectedEffect = 'blind'; 

       var options = {}; 

       $("#successMessage").hide(selectedEffect, options, 500); 
      }; 

      $("#successMessage").click(function() { 
       runEffect(); 
       return false; 
      }); 
     }); 
    </script> 

クリック機能を削除して、5秒後にrunEffect（）を呼び出すタイムアウトメソッドを追加したいと思います。

mucho gracias！

Answer 1

$(function() { 
    // setTimeout() function will be fired after page is loaded 
    // it will wait for 5 sec. and then will fire 
    // $("#successMessage").hide() function 
    setTimeout(function() { 
     $("#successMessage").hide('blind', {}, 500) 
    }, 5000); 
}); 

注：のsetTimeoutの内側にあなたのjQueryの機能を動作させるためには、あなたがあなたがあなたrunEffect機能上のsetTimeoutを使用

function() { ... } 

Answer 2

の内側にそれをラップする必要があります

function runEffect() { 
    setTimeout(function(){ 
     var selectedEffect = 'blind'; 
     var options = {}; 
     $("#successMessage").hide(selectedEffect, options, 500) 
    }, 5000); 
} 

Answer 3

$('#selector').delay(5000).fadeOut('slow'); 

Answer 4

私は、あなたも同じようなことをすることができると思う...

setTimeout(function(){ 
    $(".message-class").trigger("click"); 
}, 5000); 

とイベントクリックであなたのアニメーション効果を行う...

$(".message-class").click(function() { 
    //your event-code 
}); 

挨拶、

Answer 5

あなたが試すことができます。

setTimeout(function() { 
    $('#successMessage').fadeOut('fast'); 
}, 30000); // <-- time in milliseconds 

をあなたが、その後これを使用した場合divは30秒後に隠れるだろう。私もこれを試してみて、それは私のために働いた。

Answer 6

これは、クリックした後にタイムアウトを設定する方法です。

$(".selectorOnWhichEventCapture").on('click', function() { 
    setTimeout(function(){ 
     $(".selector").doWhateverYouWantToDo(); 
    }, 5000); 
}); 

// 5000 = 5秒= 5000（ミリ秒）

Answer 7

あなたはそれが消えた後、再びdivのテキストを表示する必要がある場合がありますのでご注意ください。 したがって、ある時点で要素を空にしてから再度表示する必要があります。

あなたは、コードの1行でこれを行うことができます：あなたはjQueryのを使用している場合には、少なくとも要素を自動的に隠すしない、のsetTimeoutを必要としない

$('#element_id').empty().show().html(message).delay(3000).fadeOut(300); 

。