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:

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