Question

我正在网站上工作，我有一个在页面加载时隐藏的div，但在顶部标题元素和表单之间保持一个小的差距。

在某种情况下，javascript用于向消息div添加一个类并向用户显示消息，在5秒计时器之后，消息随后淡出并删除类，并添加另一个类以保持但是，标题元素和表单之间的间隙不起作用，而当消息div淡出时，表单会跳转到消息所在的位置。

下面是我的StyleSheet

#message
{
    height: 50px;
}

.messageBlank
{
    width: 800px;
    height: 50px;
    background-color: transparent;
    border: none;
    margin-left: auto;
    margin-right: auto;
}

.messageError
{
    width: 800px;
    height: 50px;
    background-color: #ff5555;
    border: solid red thin;
    margin-left: auto;
    margin-right: auto;
}

下面是我的javascript，它控制显示和隐藏消息框

var timer = null; 
var MessageTypeEnum = {"error":1, "workingOrComplete":2}
function showMessage(persistent, message, type)
{
    clearTimeout(timer);
    //$('#message').css({
    //    position:'absolute',
    //    padding: '10px',
    //    left: ($(window).width() - $('#message').outerWidth(true))/2
    //});

    $("#message")
        .hide()
        .html(message);

    //if (type == "error")
    if (type === MessageTypeEnum.error)
    {
        $("#message").addClass("messageError");
    }
    //else if (type == "workingComplete")
    else if (type === MessageTypeEnum.workingOrComplete)
    {
        $("#message").addClass("messageWorkingComplete");
    }

    $("#message").fadeIn("slow");
    if (!persistent)
    {
        timer = setTimeout("hideMessage()", 5000);
    }
}

function hideMessage()
{
    $("#message")
        .fadeOut("slow", function()
        {
            $("#message").removeClass("messageError");
            $("#message").removeClass("messageWorkingComplete");
            $("#message").addClass("messageBlank");
        });
}

以下是我的HTML

<body>
        <div id="container">
            <header>
                <a href="http://www.boardiesitsolutions.com" title="Return to Boardies IT Solutions"><img src="../images/header.png" alt="header" /></a>
                <span style="font-weight: bold; padding-left: 50px; color: white; top: 0px; position: absolute;">Boardies Bug Reporter</span>
            </header>

            <div id="content">

                <div id="errorToolbox">&nbsp;</div>

                <div id="message" class="messageBlank">&nbsp;</div>

                <form action="javascript:validate();" novalidate>
                    <table>
                        <tr>
                            <td>Username: </td>
                            <td>
                                <input type="text" id="txtUsername" name="txtUsername" autofocus required placeholder="Username" />
                            </td>
                        </tr>
                        <tr>
                            <td>Password: </td>
                            <td>
                                <input type="password" id="txtPassword" name="txtPassword" required placeholder="Password"
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td class="buttonGroup">
                                <input type="submit" value="Submit" />
                                <input type="reset" value="Reset" />
                            </td>
                        </tr>
                    </table>
                </form>

            </div>

Answer 1

如果您想保持差距，则应使用fadeTo()方法。例如，你可以做hidde元素：

$("#message").fadeTo( 200, 0, function()...

并显示

 $("#message").fadeTo( 200, 1);

其中200是动画应该以多快的速度以毫秒为单位的时间。

此方法只会更改元素的opacity并保持原始高度

保持隐藏元素之间的间隙，避免跳跃位置

1 个答案: