jquery 元素上的 slideIn 不起作用

Question

我似乎无法使用 jQuery 幻灯片方法。

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

HTML:

<div id="customers-say">
                <h1>WHAT OUR CUSTOMERS SAY...</h1>  

            </div>

JQUERY:

$(document).ready(function(){

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

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


        });

Answer 1

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>

Answer 2

您不能将 slideDown 事件应用于已经可见的元素，它最初必须隐藏，Slidedown 会慢慢取消隐藏它。

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

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

jquery 元素上的 slideIn 不起作用

jquery slideIn on element is not working

jquery

slidedown