jQuery slideDown() error

jQuery slideDown() error

本文关键字：error slideDown jQuery      更新时间：2023-12-31

当我像这样设置我的网站时：

HTML:

<form action="">
    <div id="leftStreak">
        <span class="inputLabel">E-mail:</span>
        <input name="login" id="loginInput" type="text"/>
    </div>
    <div id="rightStreak">
        <span class="inputLabel">Password:</span>
        <input name="password" id="passwordInput" type="password"/>
    </div>
    <br />
    <input type="submit" name="submit" value="Log-in" id="login"/>
</form>
<br />      
<p id="mainLabel">Something gone wrong... Contact with admin.</p>

CSS：

#mainLabel {
    width      : 300px;
    height     : 100px;
    font-size  : 200%;
    background : #A60000;
    text-align : center;
    position   : relative;
    border     : 2px dotted white;
    left       : calc( 50% - 150px );
    z-index    : 3;
    display    : none;
}

当#mainLabel的登录名或密码有问题时，我会给动画slideDown()，但当动画完成时，除了文本外，背景和边框都保持在同一位置。

我不知道发生了什么，但这取决于我以前做过的动画。当这些以前的动画进行时，"现在没有动画"中的文本不知何故在移动。

这意味着较高元素上的动画将对较低元素产生影响。这没有任何意义！我一直在研究这个问题，并在谷歌上搜索，但一无所获。

我同时运行Chrome和Firefox，同样的问题。

请求帮助。提前谢谢。

编辑：

@ps2船是的，这个片段展示了我所做的。除了这些"#leftStreak，#rightStreak"也在动画中，当它移动时，"#mainLabel"中的文本会以某种方式移动。只有文字，一切都在同一个地方。剩下的就是

JS:

$("#leftStreak").hide().delay(1300).slideDown(700);
$("#rightStreak").hide().delay(1400).slideDown(700);
$(".inputLabel").each( function() {
    $(this).hide().delay(2200).slideDown(500);
});
$("input").each( function() {
    $(this).hide().delay(2400).slideDown(500);
});

然后当出现错误时：

JS:

 $("#mainLabel").slideDown();

https://i.stack.imgur.com/fdHuP.png-屏幕截图链接。

如果你没有看到这一点，你必须给我们更多的动画代码来分析或发布图像。这似乎对我有用。

$('#mainLabel').slideDown();
#mainLabel {
    width      : 300px;
    height     : 100px;
    font-size  : 200%;
    background : #A60000;
    text-align : center;
    position   : relative;
    border     : 2px dotted white;
    left       : calc( 50% - 150px );
    z-index    : 3;
    display    : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form action="">
    <div id="leftStreak">
        <span class="inputLabel">E-mail:</span>
        <input name="login" id="loginInput" type="text"/>
    </div>
    <div id="rightStreak">
        <span class="inputLabel">Password:</span>
        <input name="password" id="passwordInput" type="password"/>
    </div>
    <br />
    <input type="submit" name="submit" value="Log-in" id="login"/>
</form>
<br />      
<p id="mainLabel">Something gone wrong... Contact with admin.</p>

相关文章：