5秒后jQuery自动隐藏元素

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

基本上，我有

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

我想在5秒后消失。我已经看过jQuery UI和hide效果，但是在按我想要的方式工作时遇到了一些麻烦。

<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（）的超时方法。

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

注意：为了使jQuery函数在setTimeout中工作，您应该将其包装在其中

function() { ... }

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

你可以试试 ：

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

如果您使用了它，那么30秒钟后您的div将被隐藏。

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

您可以使用1行代码来做到这一点：

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

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

您可以在runEffect函数上使用setTimeout：

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

我想，您也可以做类似...

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

并在事件单击上执行动画效果...

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

问候，

jQuery（“。success_mgs”）。show（）; setTimeout（function（）{jQuery（“。success_mgs”）。hide（）;}，5000）;

单击后，这是设置超时的方法。

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

// 5000 = 5秒= 5000毫秒