DIV顯示隱藏內嵌

Question

我定義的模板如下：

$.template('aTemplate', 
    '<div id="someid" class="abc">' + 
    .... 
    '</div>' 
); 

我想這個div是內嵌在其他元素（無論我把它們）。 我也希望這個div被隱藏（當我將它添加到DOM），然後在某些其他操作（用戶單擊）上變爲可見。

所以使其內聯和隱藏的，我定義下面的CSS

.abc { 
    display: inline-block; 
    visibility: hidden; 
} 

和一些動作，我有

$('#someid').show() 

但它似乎並不工作。有什麼可以糾正的建議？

Answer 1

你的問題是$.show()將設置display:inline-block

從文檔：
http://api.jquery.com/show/
匹配的元素將被立即發現，沒有動畫。這大致相當於調用.css（'display'，'block'），除了display屬性恢復到最初的狀態。如果一個元素的顯示值爲內聯，然後被隱藏並顯示，它將再次以內聯方式顯示。

如果你想div來維持它在DOM位置，儘量不透明度設置爲0開始：

.abc { 
    display: inline-block; 
    opacity: 0; 
} 

然後調用：

$('#someid').css('opacity','1');