不必要的跳转.show（）

Question

我想在bootstrap的登录示例[1]上添加一些错误字段，方法是添加一些在出错时显示的隐藏错误字段。但它跳跃而不是线性滑动。

<form class="form-signin" role="form"> 
<h2 class="form-signin-heading">Please sign in</h2> 

<div id="div-email"> 
    <label class="control-label" for="email">Error</label> 
    <input id="email" class="form-control" placeholder="Email address" required="required" autofocus="autofocus" maxlength="100" type="email"> 
</div> 
<div id="div-password"> 
    <label class="control-label" for="password">Error</label> 
    <input id="password" class="form-control" placeholder="Password" required="required" maxlength="100" value="" type="password"> 
</div> 
<div class="checkbox"> 
    <label> 
     <input id="remember" type="checkbox">Remember me</label> 
</div> 
</form> 
<button id="myButton" class="btn btn-lg btn-primary btn-block" onclick="myButtonClicked();">Sign in</button> 
<script> 
    function myButtonClicked() { 
     $("#div-email").addClass('has-error'); 
     $("label[for='email']").text('Nice error to be shown.').show("slow"); 
    } 
</script> 

和额外的CSS代码隐藏在启动错误字段：http://jsfiddle.net/gngqdkp9/1/

一些类似的例子（类似问题上的SO或谷歌：

.control-label { 
display: none; 
} 

您可以通过点击按钮，看到活生生的例子和他们各自的解决方案）提供了设置一些元素的宽度，但没有设法工作。

我想是平滑的滑动，而不是弹跳，由于事先...

---

[1] http://getbootstrap.com/examples/signin/

Answer 1

的解决方案是做的CSS（ '显示器'， '块' ）之后。

$("label[for='email']").text('Nice error to be shown.').show("slow").css('display', 'block'); 

这是因为显示方法，当完成时，将'dispay：inline-block'设置为标签。

我希望它帮你

解决方法：http://jsfiddle.net/gngqdkp9/2/