5秒后jQuery自动隐藏元素

Question

是否可以在使用jQuery加载表单后5秒自动隐藏网页中的元素？

基本上,我有

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

我想在5秒后消失.我已经看过jQuery UI和隐藏效果,但是我有点麻烦让它以我想要的方式工作.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

我想删除click函数并添加一个在5秒后调用runEffect()的超时方法.

很多格拉西亚斯!

Answer 1

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

Answer 2

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

注意:为了让你在setTimeout中使用jQuery函数,你应该将它包装在里面

function() { ... }

Answer 3

你可以试试 :

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

如果你使用了这个,那么你的div将在30秒后隐藏.我也试过这个,它对我有效.

Answer 4

请注意，您可能需要在 div 文本消失后再次显示它。因此，您还需要清空，然后在某个时候重新显示该元素。

您可以使用 1 行代码执行此操作：

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

如果您使用 jQuery，则不需要 setTimeout，至少不需要自动隐藏元素。