jquery延迟不起作用

Question

我有下一个div:

<div id="atack">
    <h1>Example</h1>
    <h2>Example</h2>
</div>

css是:

 #ataque{
    -moz-border-radius: 10px;
    border: solid thick;
    display: none;
    background: url('../images/check48.png') no-repeat 10px 10px;
    background-color: #000000;
    position: absolute;
    width: 350px;
    height: 100px;
    top: 1cm ;
    right: 1cm;
    padding-top: 10px;
 }

当按下运行按钮时我想在5秒内显示一条消息,我用jquery尝试但是不起作用...

其他代码是:

<form method=GET>
 <input id="vm_action_btn" type=submit name=ataque value="Tipping Point" class="btn" />
 <input type=hidden name=num_exec value=5 >
</form>

<script language="JavaScript">

$(function() {      
$("#vm_action_btn").bind('click', function() {
        $('#atack').show().delay(5000).hide();
    });
}); 
</script>

我不知道问题出在哪里!谢谢!

Answer 1

给出.hide()一个持续时间,它将被添加到默认值queue (这是你要延迟的那个).

  // just add a 0-------------------v
$('#atack').show().delay(5000).hide(0);

这是因为.delay()只会延迟队列中的下一个项目,而jQuery自动排队的唯一项目是动画.

给予一个0持续时间,jQuery会将其视为动画,并将该hide方法添加到默认队列中.

要手动对函数进行排队,请将函数传递给该queue()方法.

$('#atack').show()
           .delay(5000)
           .queue(function() {
               $(this).hide()
                      .dequeue();
           });