当我试图淡出时，为什么margin-top不起作用。当我简单地使用显示块时，它工作正常

Question

我有一个错误消息的span，分配了一个类.error_msg它的margin-top为5px。当我将其显示属性更改为阻止时，它工作正常，但是当我尝试淡入它时忽略了margin-top。

HTML：

<div id=first_name>
First Name<br />
<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" <?php echo ($error_first_name == true) ? "style='display: block'" : "style='display: none'" ; ?> /></td><td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td></tr>
<tr><td colspan="2"><span class="error_msg" id="form_first_name_err_msg" <?php echo ($error_first_name == true) ? "style='display: block'" : "style='display: none'" ; ?>>This cannot be left blank.</span></td></tr>
</table>
</div><!-- eof first_name -->
<div id=last_name>
Last Name<br />
<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src='images/form_error.png' class="error_image" id="form_last_name_err_img" <?php echo ($error_last_name == true) ? "style='display: block'" : "style='display: none'" ; ?> /></td><td><input align="middle" id="form_last_name" class="form_field1" type="text" name="last_name" /></td></tr>
<tr><td colspan="2"><span class="error_msg" id="form_last_name_err_msg" <?php echo ($error_last_name == true) ? "style='display: block'" : "style='display: none'" ; ?>>Last name should be of minimum 2 characters.</span></td></tr>
</table>
</div><!-- eof last_name -->

CSS：

.error_msg {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

jQuery：

    function check_first_name() {

        var first_name_length = $("#form_first_name").val().length;

        if(first_name_length < 1) {
            $("#form_first_name_err_img").fadeIn();
            $("#form_first_name_err_msg").fadeIn();
            error_first_name = true;
        } else {
            $("#form_first_name_err_img").hide();
            $("#form_first_name_err_msg").hide();
        }

    }

function check_last_name() {

    var last_name_length = $("#form_last_name").val().length;

    if(last_name_length < 2) {
        $("#form_last_name_err_img").css( "display", "block" );
        $("#form_last_name_err_msg").css( "display", "block" );
        error_last_name = true;
    } else {
        $("#form_last_name_err_img").css( "display", "none" );
        $("#form_last_name_err_msg").css( "display", "none" );
    }   

}

Answer 1

<span> s和<img> s不是块级元素。在fadeIn()之后，如果您检查其显示属性，它们将为inline。当您专门将其设置为block时，他们会尊重边距，但在inline

期间自动设置为fadeIn()时则不会

您可以尝试：

而不是fadeIn()

$("#form_first_name_err_img")
    .css({opacity: 0, display: 'block'})
    .animate({opacity: 1}, 'fast');

Answer 2

而不是display: none;在您的CSS中使用visibility: hidden;。它允许在页面上为它分配空间

Answer 3

.error_msg {
     color: red;
     font-size: 12px;
     margin-top: 5px;
     display:block;
     opacity:0;
     filter:alpha(opacity=0); /*** this is for old ie browsers *******/
}

这是基本的演示链接

http://jsfiddle.net/jkkheni/Q44jP/1/