个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 17:54:51 26 4
gpt4 key购买 nike

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

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

下面是我的样式表

#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>

最佳答案

如果你想保持间隙，你应该使用 fadeTo()方法。例如隐藏元素你可以这样做:

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

并显示

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

200 是以毫秒为单位的动画运行速度的时间。

这个方法只会改变元素的不透明度并保持它原来的高度

关于javascript - 保持隐藏元素之间的间隙以避免跳跃位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21498901/

26 4 0
文章推荐： html - 使用 CSS 在 `LI` 项上设置选择颜色和选择指示器
文章推荐： javascript - 为什么 Javascript Listener 知道图像已加载，而 js 是加载序列中的最后一个文件？
文章推荐： html - 将显示为表格且绝对定位的 div 居中
文章推荐： python - 当我认为不应该时，App Engine urlfetch 正在引发异常
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com