元素上的jquery slideIn不工作_Jquery_Slidedown

元素上的jquery slideIn不工作

jquery

元素上的jquery slideIn不工作,jquery,slidedown,Jquery,Slidedown,我似乎无法让jQuery滑入方法工作请看下面我的代码。其他jquery方法工作正常 HTML: HTML将在动画之前显示。我添加了一个内联样式，从一开始就隐藏所有元素 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $

我似乎无法让jQuery滑入方法工作

请看下面我的代码。其他jquery方法工作正常

HTML:

HTML将在动画之前显示。我添加了一个内联样式，从一开始就隐藏所有元素

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

            $("#customers-say").slideDown("slow");

            $("#f1").fadeIn(1000, function(){
                $("#f2").fadeIn(1000, function(){
                    $("#f3").fadeIn(1000, function(){
                        $("#f4").fadeIn(1000);
                    })
                })
            });


        });
</script>
</head>
<body>

<div style="display:none;" id="customers-say">
                <h1>WHAT OUR CUSTOMERS SAY...</h1>  

            </div>

            <h2 style="display:none;" id="f1">A. Dylan</h2>
            <h2 style="display:none;" id="f2">B. Dylan</h2>
            <h2 style="display:none;" id="f3">C. Dylan</h2>
            <h2 style="display:none;" id="f4">D. because I spit hot fire</h2>
</body>
</html>


$（文档）.ready（函数（）{
美元（“#顾客说”）。向下滑动（“慢”）；
$（“#f1”）.fadeIn（1000，函数（）{
$（“#f2”）.fadeIn（1000，函数（）{
$（“#f3”）.fadeIn（1000，函数（）{
$（“#f4”）.fadeIn（1000）；
})
})
});
});
我们的客户所说的。。。
A.迪伦
迪伦
迪伦
因为我吐的是烈火

您无法将slideDown事件应用于已可见的元素。必须先将其隐藏，slideDown将缓慢地将其取消隐藏

在您的示例中，简单地将此CSS应用于您的元素

#customers-say {
            background: #de9a44;
            margin: 3px;
            display: none;
            float: left;
      }

啊，非常感谢Zaigham！我是web开发和Jquery新手，所以我犯了这样愚蠢的错误，但肯定会从中吸取教训。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

            $("#customers-say").slideDown("slow");

            $("#f1").fadeIn(1000, function(){
                $("#f2").fadeIn(1000, function(){
                    $("#f3").fadeIn(1000, function(){
                        $("#f4").fadeIn(1000);
                    })
                })
            });


        });
</script>
</head>
<body>

<div style="display:none;" id="customers-say">
                <h1>WHAT OUR CUSTOMERS SAY...</h1>  

            </div>

            <h2 style="display:none;" id="f1">A. Dylan</h2>
            <h2 style="display:none;" id="f2">B. Dylan</h2>
            <h2 style="display:none;" id="f3">C. Dylan</h2>
            <h2 style="display:none;" id="f4">D. because I spit hot fire</h2>
</body>
</html>

#customers-say {
            background: #de9a44;
            margin: 3px;
            display: none;
            float: left;
      }