Sembunyikan div setelah beberapa detik

Saya bertanya-tanya, bagaimana di jquery saya bisa menyembunyikan div setelah beberapa detik? Seperti pesan Gmail misalnya.

Saya sudah mencoba yang terbaik tetapi tidak berhasil.

Ini akan menyembunyikan div setelah 1 detik (1000 milidetik).

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

#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

Jika Anda hanya ingin menyembunyikan tanpa memudar, gunakan hide().

Anda dapat mencoba .delay()

$(".formSentMsg").delay(3200).fadeOut(300);

panggil div setel waktu tunda dalam milidetik dan setel properti yang ingin Anda ubah, dalam hal ini saya menggunakan .fadeOut () sehingga bisa dianimasikan, tetapi Anda juga bisa menggunakan .hide ().

http://api.jquery.com/delay/

jquery menawarkan berbagai metode untuk menyembunyikan div dalam waktu yang tidak memerlukan pengaturan dan kemudian membersihkan atau mengatur ulang pengatur waktu interval atau penangan kejadian lainnya. Berikut ini beberapa contoh.

Persembunyian murni, penundaan satu detik

// hide in one second
$('#mydiv').delay(1000).hide(0); 

Kulit murni, tanpa penundaan

// hide immediately
$('#mydiv').delay(0).hide(0); 

Sembunyikan animasi

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500); 

memudar

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300); 

Selain itu, metode dapat menggunakan nama antrian atau fungsi sebagai parameter kedua (tergantung pada metode). Dokumentasi untuk semua panggilan di atas dan panggilan terkait lainnya dapat ditemukan di sini: https://api.jquery.com/category/effects/

Ada cara yang sangat sederhana untuk melakukan ini.

Masalahnya adalah .delay hanya mempengaruhi animasi, jadi yang perlu Anda lakukan adalah membuat .hide () bertindak seperti animasi dengan memberinya durasi.

$("#whatever").delay().hide(1);

Dengan memberikan durasi pendek yang bagus, ini tampak instan seperti fungsi .hide biasa.

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

Dari http://james.padolsey.com/javascript/jquery-delay-plugin/

(Memungkinkan perangkaian metode)

Menggunakan pengatur waktu jQuery juga akan memungkinkan Anda untuk memiliki nama yang terkait dengan pengatur waktu yang dilampirkan ke objek. Jadi Anda bisa memasang beberapa timer ke suatu objek dan menghentikan salah satu dari mereka.

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

Fungsi eval (dan kerabatnya, Function, setTimeout, dan setInterval) menyediakan akses ke compiler JavaScript. Ini terkadang diperlukan, tetapi dalam banyak kasus ini menunjukkan adanya pengkodean yang sangat buruk. Fungsi eval adalah fitur JavaScript yang paling banyak disalahgunakan.

http://www.jslint.com/lint.html

Mungkin cara termudah adalah dengan menggunakan plugin pengatur waktu. http://plugins.jquery.com/project/timers lalu panggil sesuatu seperti

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

bisa langsung kita gunakan

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

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>