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

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

通过css()将图像的visibility设置为hidden而不是使用hide()

visibility:hidden隐藏元素，但该元素仍会占用其空间。 hide()将显示设置为无，元素不占用空间。