在文本框之后添加图像而不移动它

Question

我想在文本框之后显示图像以进行验证（勾选和交叉） 但是当我显示或隐藏它们时，文本框会垂直向上或向下跳跃

这是HTML

<table cellspacing="20">
<tr>
    <td>Username</td>
    <td>*<input type="text" id="username" class="required" name="user.username" value="" size="30" />
    </td>
</table>

和javascript

window.onload = function(){

$('input.required').after('<img class="toggle"></img>').next().hide();

$('input.required').blur(function() {
 if ($(this).val().length == 0) {
    $(this)
    .addClass('error')
    .next()
    .attr('src','images/unchecked.gif').fadeIn()

 }
 else
 {
    $(this).next().attr('src','images/checked.gif').fadeIn()
 }

我希望文本框保持固定，不要继续切换图像

Answer 1

通过visibility将图片的css() - 属性设置为hidden，而不是使用hide()

visibility:hidden隐藏了一个元素，但该元素仍然会占用它的空间。 hide()会将显示设置为none，其中元素不占用空间。