Jquery SlideDown 偶尔工作

Question

我使用 google chrome 并且 slideDown 无法正常工作。有时 div 下降，有时仍然关闭，我必须刷新页面并等待它决定 slideDown。这是代码：

HTML

<header>
<div class="container">
    <img src="../themes/<?= GDR_THEME ?>/images/graphic/barratop.png" />
        <div id="box_body" class="content mCustomScrollbar light" data-mcs-theme="minimal">
            <div id="box_text" >
                <form name="termini" action="core.register_1.php" method="post">
                <?php include_once "../text/regolamento.html"; ?>
                <p class="button">
                <input id="check" src="../themes/<?= GDR_THEME ?>/images/graphic/accettoff.png" 
                type="image" onMouseOver="this.src='../themes/<?= GDR_THEME ?>/images/graphic/accetton.gif'" 
                onMouseOut="this.src='../themes/<?= GDR_THEME ?>/images/graphic/accettoff.png'" />
                <input name="rego" value="ok" type="hidden" />
                </p>
                </form>
            </div>
        </div>
    <img src="../themes/<?= GDR_THEME ?>/images/graphic/barradown.png" />
</div>

CSS

.container {
    width: 600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
#box_body {
    width: 530px;
    height: 460px;
    position: relative;
    text-align: justify;
    overflow-y: hidden;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: none;  
}
#box_text {
    position: relative;
    float: left;
}
.button {
    position: relative;
    text-align: center;
}

JAVASCRIPT

$(document).ready(function(){
    $("#box_body").slideDown(2500);
});

有时滑下来有时不... 我的LINK：http://khchapterzero.altervista.org/core/core.register_0.php

Answer 1

slideDown() 确实工作得很好。问题是，您的脚本在 DOM 索引中的位置高于样式表：

<script src='../themes/custom/js/jquery.min.js'></script> 
<script src='../themes/custom/js/jquery.main.js'></script> 
<script src='../themes/custom/js/jquery.scrollbar.js'></script> 
<script src='../themes/custom/js/jquery.register_0.js'></script> 
<link rel='icon' href='../themes/custom/images/engine/icon.png' type='image/x-icon' />
<link rel='stylesheet' type='text/css' href='../themes/custom/css/main.css' />
<link rel='stylesheet' type='text/css' href='../themes/custom/css/register_0.css' /> 
<link rel='stylesheet' href='../themes/custom/css/Scrollbar.css' />

这是您 CSS 的一部分，有时会隐藏您的 #box_body :

#box_body {
    ...
    display: none;  
}

您的 display: none; CSS 样式有时应用于元素 after slideDown(); 因为您的样式表文件有时在脚本文件之后加载。

好的做法是将 CSS 样式表放在 <head> 标签和脚本中，紧挨着关闭 </body> 标签。

Jquery SlideDown 偶尔工作

Jquery SlideDown work occasionally

javascript

jquery

html

css

slidedown