javascript - 函数结束时看到的 jQuery 隐藏和显示效果

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(options)允许你传递 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: