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或谷歌上的类似问题及其各自的解决方案）提供了为元素设置一些宽度，但无法正常工作。

我想要的是光滑的滑动而不是反弹，提前谢谢......

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

Answer 1

解决方案是在演出结束后进行.css（＆＃39;显示＆＃39;，＆＃39;阻止＆＃39;）。

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

这是因为show方法，当完成时，设置＆＃39; dispay：inline-block＆＃39;到标签。

我希望它能帮到你

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

.show（）时不需要的跳转

1 个答案: