Sembunyikan div setelah beberapa detik

123

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.

James
sumber
1
Apakah menyembunyikan saja sudah cukup, atau Anda perlu menyembunyikannya?
Joel Coehoorn

Jawaban:

247

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().

swilliams
sumber
2
dan Anda telah mengalahkan Joel Coehoorn yang gila dengan sangat baik dalam satu kesempatan! :)
cregox
3
@ James, Pastinya tidak ada perbedaan pada hasil akhir, tapi saya kira implementasi yang menggunakan .delay()lebih "asli" dan elegan untuk jQuery.
Paul T. Rawkeen
Anda dapat mengganti .fadeOut('fast')dengan .hide()untuk menyembunyikan div secara instan.
Raptor
90

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/

peter punk
sumber
7
Ini lebih baik karena saya tidak harus menggunakan setTimeout dan kode lebih mudah dibaca.
Marek Bar
12

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/

Robert Mauro
sumber
10

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.

Oisin Lavery
sumber
6
$.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)

Peter Smit
sumber
3

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

kamaci
sumber
2

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();
  });
rangsangan
sumber
1
Apakah ada alasan kuat untuk menggunakan plugin pengatur waktu dibandingkan setTimeout atau setInterval?
pembelanjaan
2
Saya akan mengatakan bahwa mengunduh dan melampirkan plugin jquery kurang mudah daripada hanya menggunakan setTimeout.
Nathan Ridley
1
Saya tidak berpikir ini adalah hal yang buruk, tetapi karena jarang saya pernah menggunakan timer dalam kode saya, memiliki plugin itu (baca: kode tambahan, mengasapi) untuk beberapa kali tidak lebih besar daripada biayanya. Jika Anda menulis banyak kode yang perlu menggunakan pengatur waktu, dan menggunakan jQuery, saya dapat melihat mengapa plugin ini akan sangat berguna untuk dipertahankan dengan sintaks jQuery ...
Jason Bunting
0

bisa langsung kita gunakan

$('#selector').delay(5000).fadeOut('slow');
subindas pm
sumber
0
<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>
Ch UmarJamil
sumber
Harap jangan hanya memposting kode sebagai jawaban, tetapi juga berikan penjelasan apa yang kode Anda lakukan dan bagaimana itu menyelesaikan masalah pertanyaan. Jawaban dengan penjelasan biasanya lebih bermanfaat dan berkualitas lebih baik, dan lebih cenderung menarik suara positif.
Mark Rotteveel