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() 一个持续时间，它将被添加到默认队列 (这是您要延迟的队列).

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