Phần tử autohide jQuery sau 5 giây

Question

Có thể tự động ẩn phần tử trong trang web 5 giây sau khi tải biểu mẫu bằng jQuery không?

Về cơ bản, tôi đã có

<div id="successMessage">Project saved successfully!</div> 

mà tôi muốn biến mất sau 5 giây. Tôi đã nhìn vào giao diện người dùng jQuery và hiệu ứng ẩn nhưng tôi gặp một chút rắc rối khi nó hoạt động theo cách tôi muốn.

<script type="text/javascript"> 
     $(function() { 
      function runEffect() { 

       var selectedEffect = 'blind'; 

       var options = {}; 

       $("#successMessage").hide(selectedEffect, options, 500); 
      }; 

      $("#successMessage").click(function() { 
       runEffect(); 
       return false; 
      }); 
     }); 
    </script> 

Tôi muốn chức năng nhấp được xóa và thêm phương thức hết giờ gọi runEffect() sau 5 giây.

mucho gracias!

Answer 1

$(function() { 
    // setTimeout() function will be fired after page is loaded 
    // it will wait for 5 sec. and then will fire 
    // $("#successMessage").hide() function 
    setTimeout(function() { 
     $("#successMessage").hide('blind', {}, 500) 
    }, 5000); 
}); 

Note: Để làm cho bạn jQuery chức năng làm việc bên trong setTimeout bạn nên quấn nó bên

function() { ... } 

Answer 2

Bạn sử dụng setTimeout trên bạn chức năng runEffect:

function runEffect() { 
    setTimeout(function(){ 
     var selectedEffect = 'blind'; 
     var options = {}; 
     $("#successMessage").hide(selectedEffect, options, 500) 
    }, 5000); 
} 

Answer 3

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

Answer 4

Tôi nghĩ, bạn cũng có thể làm một cái gì đó như ...

setTimeout(function(){ 
    $(".message-class").trigger("click"); 
}, 5000); 

và làm hiệu ứng hoạt hình của bạn trên các sự kiện chuột ...

$(".message-class").click(function() { 
    //your event-code 
}); 

Greetings,

Answer 5

Bạn có thể thử:

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

Nếu bạn sử dụng này sau đó bạn div sẽ được ẩn sau 30 giây. Tôi cũng đã cố gắng này và nó đã làm việc cho tôi.

Answer 6

Đây là cách bạn có thể đặt thời gian chờ sau khi bạn nhấp.

$(".selectorOnWhichEventCapture").on('click', function() { 
    setTimeout(function(){ 
     $(".selector").doWhateverYouWantToDo(); 
    }, 5000); 
}); 

// 5000 = 5sec = 5000 mili giây

Answer 7

Xin lưu ý bạn có thể cần để hiển thị div văn bản một lần nữa sau khi nó đã biến mất. Vì vậy, bạn sẽ cần phải cũng trống và sau đó lại hiển thị các yếu tố tại một số điểm.

Bạn có thể làm điều này với 1 dòng mã:

$('#element_id').empty().show().html(message).delay(3000).fadeOut(300); 

Nếu bạn đang sử dụng jQuery bạn không cần setTimeout, ít nhất là không để tự động ẩn một phần tử.