jQuery tampil selama 5 detik lalu sembunyikan

145

Saya menggunakan .showuntuk menampilkan pesan tersembunyi setelah formulir berhasil dikirim.

Bagaimana cara menampilkan pesan selama 5 detik lalu sembunyikan?

— josoroma
sumber

351

Anda dapat menggunakan .delay()sebelum animasi, seperti ini:

$("#myElem").show().delay(5000).fadeOut();

Jika ini bukan animasi, gunakan setTimeout()langsung, seperti ini:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

Anda melakukan yang kedua karena .hide()biasanya tidak ada di fxantrian animasi ( ) tanpa durasi, itu hanya efek instan.

Atau, opsi lain adalah menggunakan .delay()dan .queue()diri Anda sendiri, seperti ini:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

— Nick Craver
sumber

1

Saran 2 bekerja dengan sempurna dengan menampilkan ikon tanda centang dan menggunakan fadeOut () alih-alih sembunyikan (). Jawaban yang bagus

— Kevin Zych

2

@wilsjd Tidak, Anda tidak dapat, tidak .delay()akan bekerja dengan .hide()elemen akan ditampilkan kemudian segera disembunyikan. Lihat jsFiddle ini, inilah sebabnya Nick menyatakan, "Jika ini bukan animasi, gunakan setTimeout () secara langsung, seperti ini: ...."

— Wesley Smith

Hmm, saya bertanya-tanya apakah itu bekerja dua tahun lalu. Nice ditemukan. Terima kasih telah membuat saya jujur.

— wilsjd

Saya juga telah menerapkan ini, tetapi ketika saya menampilkan pesan dua kali dalam 5 detik maka itu harus menyembunyikan prev dan tampilkan kembali, sementara itu tidak mengatur ulang penundaan pertama

— alamnaryab

18

Anda dapat menggunakan efek di bawah ini untuk menghidupkan, Anda dapat mengubah nilai sesuai kebutuhan Anda

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');

— Rahul
sumber

1

efek $ (...). fadeIn (...). animate (...). bukan fungsi di JQuery 2.1.3

— Dustin Charles

@DustinCharles Tambahkan jQueryUI bukan hanya jQuery. jQuery tidak mengandung fungsi effect (), mis. code.jquery.com/ui/1.12.0/jquery-ui.min.js

— Rahul

0

Sesederhana ini:

$("#myElem").show("slow").delay(5000).hide("slow");

— Antonio Ooi
sumber