我想在 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 上的类似问题及其各自的解决方案)提供了为元素设置一些宽度,但没有成功。
我想要的是平滑的滑动而不是弹跳,在此先感谢...
最佳答案
解决方案是在显示之后执行 .css('display', 'block')。
$("label[for='email']").text('Nice error to be shown.').show("slow").css('display', 'block');
这是因为 show 方法,当完成时,将 'dispay: inline-block' 设置为标签。
希望对你有帮助
关于javascript - .show() 时不需要的跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25702381/