Ẩn div sau vài giây

Tôi đã tự hỏi, làm thế nào trong jquery tôi có thể ẩn một div sau vài giây? Ví dụ như tin nhắn của Gmail.

Tôi đã cố gắng hết sức nhưng không thể làm cho nó hoạt động.

Điều này sẽ ẩn div sau 1 giây (1000 mili giây).

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>

Nếu bạn chỉ muốn ẩn mà không phai, hãy sử dụng hide().

Bạn có thể thử .delay()

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

gọi div đặt thời gian trễ tính bằng mili giây và đặt thuộc tính bạn muốn thay đổi, trong trường hợp này tôi đã sử dụng .fadeOut () để nó có thể là hình động, nhưng bạn cũng có thể sử dụng. leather ().

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

jquery cung cấp nhiều phương thức khác nhau để ẩn div theo cách tính thời gian mà không yêu cầu thiết lập và sau đó xóa hoặc đặt lại bộ định thời khoảng thời gian hoặc các trình xử lý sự kiện khác. Dưới đây là một vài ví dụ.

Ẩn tinh khiết, chậm trễ một giây

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

Ẩn tinh khiết, không chậm trễ

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

Hoạt hình ẩn

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

mờ dần

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

Ngoài ra, các phương thức có thể lấy tên hàng đợi hoặc hàm làm tham số thứ hai (tùy thuộc vào phương thức). Tài liệu cho tất cả các cuộc gọi ở trên và các cuộc gọi liên quan khác có thể được tìm thấy ở đây: https://api.jquery.com/carget/effects/

Có một cách thực sự đơn giản để làm điều này.

Vấn đề là .delay chỉ có hiệu ứng hoạt hình, vì vậy những gì bạn cần làm là làm cho. Leather () hoạt động giống như một hình ảnh động bằng cách cho nó một khoảng thời gian.

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

Bằng cách cung cấp cho nó một thời lượng ngắn đẹp, nó dường như ngay lập tức giống như chức năng. Leather thông thường.

$.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);
}

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

(Cho phép xâu chuỗi các phương thức)

Sử dụng bộ định thời jQuery cũng sẽ cho phép bạn có một tên được liên kết với các bộ định thời được gắn vào đối tượng. Vì vậy, bạn có thể đính kèm một số bộ định thời vào một đối tượng và dừng bất kỳ một trong số chúng.

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

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

Hàm eval (và các họ hàng của nó, Function, setTimeout và setInterval) cung cấp quyền truy cập vào trình biên dịch JavaScript. Điều này đôi khi là cần thiết, nhưng trong hầu hết các trường hợp, nó chỉ ra sự hiện diện của mã hóa cực kỳ xấu. Hàm eval là tính năng được sử dụng nhiều nhất của JavaScript.

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

Có lẽ cách dễ nhất là sử dụng plugin tính giờ. http://plugins.jquery.com/project/timers và sau đó gọi một cái gì đó như

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

chúng ta có thể trực tiếp sử dụng

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

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

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