5秒后jQuery自动隐藏元素

时间:2009-03-25 20:41:22

标签: jquery jquery-ui

使用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()的超时方法。

mucho gracias!

8 个答案:

答案 0 :(得分:195)

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

答案 1 :(得分:105)

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

答案 2 :(得分:8)

您可以尝试:

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

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

答案 3 :(得分:1)

您在runEffect函数上使用setTimeout:

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

答案 4 :(得分:1)

我想,你也可以做点像......

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

并在事件点击中进行动画效果...

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

问候,

答案 5 :(得分:0)

这是您点击后设置超时的方法。

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

// 5000 = 5sec = 5000 milisec

答案 6 :(得分:0)

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

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

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

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

答案 7 :(得分:0)

jQuery(“。success_mgs”)。show(); setTimeout(function(){jQuery(“。success_mgs”)。hide();},5000);