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