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');