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 on元素无效

2 个答案: