保持隱藏元素之間的距離以避免跳躍位置

Question

我在一個網站上工作，我有一個div，該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()方法。 例如，您可以隱藏元素：

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

並顯示

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

以毫秒為單位的200秒是動畫應以多快的速度工作。

這種方法只會改變元素的opacity ，並保持其原始高度

保持隱藏元素之間的距離以避免跳躍位置

問題描述

1 個解決方案

解決方案1
1 已采納 2014-02-01 13:58:12

保持隱藏元素之間的距離以避免跳躍位置

問題描述

1 個解決方案

解決方案1 1 已采納 2014-02-01 13:58:12

解決方案1
1 已采納 2014-02-01 13:58:12