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

好吧，我拥有它。

问题是表单将数据发送到服务器端并重新加载页面。请记住div“atack”在CSS显示中：没有，所以它被隐藏了。当我们显示或淡入，并且想要延迟其他效果时，它只有在页面加载（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; 
    }); 
}); 

非常感谢您的帮助！

Answer 2

delay()仅适用于效果（fadeIn,fadeOut等）。它不适用于show()和hide()。如果你愿意的话，你总是可以快速地做出fadeOut(50)。

从jQuery的文档”

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

Answer 3

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