jQuery hiển thị trong 5 giây rồi ẩn

145

Tôi đang sử dụng .showđể hiển thị một tin nhắn ẩn sau khi gửi biểu mẫu thành công.

Làm thế nào để hiển thị tin nhắn trong 5 giây rồi ẩn?

— bệnh u bướu
nguồn

351

Bạn có thể sử dụng .delay()trước một hình ảnh động, như thế này:

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

Nếu đó không phải là hoạt hình, hãy sử dụng setTimeout()trực tiếp, như thế này:

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

Bạn làm thứ hai vì .hide()thông thường sẽ không có trong fxhàng đợi hoạt hình ( ) mà không có thời lượng, đó chỉ là hiệu ứng tức thì.

Hoặc, một tùy chọn khác là sử dụng .delay()và .queue()chính bạn, như thế này:

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

— Nick Craver
nguồn

1

Gợi ý 2 hoạt động hoàn hảo với việc hiển thị biểu tượng dấu kiểm và sử dụng fadeOut () thay vì ẩn (). Câu trả lời chính xác.

— Kevin Zych

2

@wilsjd Không bạn không thể, .delay()sẽ không hoạt động với .hide()phần tử sẽ được hiển thị sau đó ẩn ngay lập tức. Xem jsFiddle đây là lý do Nick tuyên bố "Nếu đó không phải là hoạt hình, hãy sử dụng trực tiếp setTimeout (), như thế này: ...."

— Wesley Smith

Hmm, tôi tự hỏi nếu điều đó đã từng làm việc hai năm trước. Đẹp tìm thấy mặc dù. Cảm ơn đã giữ cho tôi trung thực.

— wilsjd

Tôi cũng đã thực hiện điều này, nhưng khi tôi hiển thị thông báo hai lần trong vòng 5 giây thì nó sẽ ẩn trước và hiển thị lại, trong khi nó không thiết lập lại độ trễ của lần đầu tiên

— alamnaryab

18

Bạn có thể sử dụng hiệu ứng dưới đây để tạo hiệu ứng, bạn có thể thay đổi các giá trị theo yêu cầu của bạn

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

— La Mã
nguồn

1

$ (...). fadeIn (...). animate (...). hiệu ứng không phải là một chức năng trong JQuery 2.1.3

— Dustin Charles

@DustinCharles Thêm jQueryUI không chỉ jQuery. jQuery không chứa hàm effect (), ví dụ code.jquery.com/ui/1.12.0/jquery-ui.min.js

— Rahul

0

Chỉ đơn giản như thế này:

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

— Antonio Ooi
nguồn