javascript - .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 代码以在开始时隐藏错误字段:

.control-label {
display: none;
}

您可以通过单击以下按钮查看实时示例:http://jsfiddle.net/gngqdkp9/1/

一些类似的例子(SO 或 google 上的类似问题及其各自的解决方案)提供了为元素设置一些宽度，但没有成功。

我想要的是平滑的滑动而不是弹跳，在此先感谢...

---

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

Answer 1

解决方案是在显示之后执行 .css('display', 'block')。

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

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

希望对你有帮助

解决方案:http://jsfiddle.net/gngqdkp9/2/