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>

我不知道问题出在哪里！ THX！

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

Answer 2

delay()仅适用于效果（fadeIn，fadeOut等）。它不适用于show()和hide()。如果您愿意，可以随时快速fadeOut(50)。

来自jQuery docs“

在版本1.4中添加到jQuery，.delay（）方法允许我们延迟在队列中执行跟随它的函数。它可以使用使用标准效果队列或使用自定义队列。只要队列中的后续事件被延迟;例如，这不会延迟不使用的.show（）或.hide（）的无参数形式效果排队。

Answer 3

好的，我有。

问题是表单将数据发送到服务器端并重新加载页面。请记住div“atack”在css显示中有：none，因此它是隐藏的。当我们显示或淡入时，并希望延迟其他效果时，只有在页面加载（1秒？）之后才可见。

我们可以这样解决这个问题：

$(function() { 

 $("#vm_action_btn").click(function() { 
    $.ajax({ 
     type: "POST",
     url: "operations.php",
     data: 'ataque=go',
     success: function() {
       $('#ataque').fadeIn(50).delay(3000).fadeOut(50);
     }
     });
     return false;
  });
});

非常感谢你的帮助！

jquery延迟不起作用

3 个答案: