jQuery hide和显示在功能末端看到的效果

Question

考虑以下代码：

<div id="thediv" >hola</div>
<button id="resharper">button</button>

使用javascript/jquery：

$("button").on( 'click', function() {
    $("#thediv").show();
    alert('click');
});
$(document).ready(function(){
    $("#thediv").hide();
})

我希望行为首先显示DIV标签，然后显示警报"单击"。相反，行为以相反的方式起作用。警报文本首先显示，然后显示按钮可见。我想念什么吗？

我可以以某种方式修改代码以获取首先显示DIV的所需行为，然后闪烁警报文本。

Answer 1

在jquery.show(选项(中检查是否允许您传递PlainObject选项。

，您可以使用 complete：一旦元素上的动画完成。

代码：

$("button").on( 'click', function() {
    $("#thediv").show({ 
      complete: function() {
        alert('click');
      } 
    });
});
$(document).ready(function(){
    $("#thediv").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

Answer 2

这是因为alert()阻止了UI线程更新，并且该线程尚未有时间在DOM中显示元素，然后再调用alert()。

理想情况下，您应该使用console.log()进行调试，但是可以通过将alert()放在setTimeout()中以非常短的延迟来避免此问题。

$("button").on( 'click', function() {
    $("#thediv").show();
    setTimeout(function() {
      alert('click');
    }, 10);
});

#thediv { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

Answer 3

$("button").on('click', function() {
  $("#thediv").show("slow", callback);
});
$(document).ready(function() {
  $("#thediv").hide();
})
function callback() {
  alert('click');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>

1. 将参数添加到.show()