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 标记，然后显示警报 "Click"。相反，行为以相反的方式起作用。首先显示警告文本，然后显示按钮。我错过了什么吗？

我能否以某种方式修改代码以获得所需的行为，即首先显示 div 然后闪烁警报文本。

Answer 1

这是因为 alert() 阻止了 UI 线程更新，并且该线程在调用 [=13] 之前还没有时间显示 DOM 中的元素=].

理想情况下，您应该使用 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 2

$("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>

将参数添加到 .show()

Answer 3

在 jQuery.show(options) allows you to pass a 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:

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

jQuery hide and show effect seen at function end

html

javascript

jquery

hide