添加条件时不执行动画的Jquery

Question

一直在玩添加一个级联动画到我的个人网站。它完全没有条件，但是我希望脚本检查动画是否已经运行，这样当用户加载一个新页面时，动画就不需要播放.。

var topper = document.getElementByClassName("top-thing");
if (topper.style.display === "none") { } 

要执行的代码是：

$(document).ready(function() {
    if (topper.style.display === "none") { 

            $('.top-thing').slideDown("slow");
            $('.middle-thing').delay(500).slideDown("slow");
            $('.bottom-thing').delay(1000).slideDown("slow");
            topper.style.display = "initial";
        } 
 });

我想我一定是以某种不正确的方式引用了style元素，我的..top thing的CSS如下所示：

 .top-thing {
    padding: 10%;
    text-align: center;
    display: none;
    background-color: #5CADFF;
    margin: 0;
    position: relative;
 }

因此，我想检查这个属性是否是" none“，并执行动画代码当且仅当它是，事实上，没有。我想有一个问题源于此:动画发生后的，JS将这个样式属性更改为什么？。

带有JSFiddle &CSS的https://jsfiddle.net/evanbananas/ua418bzo/

Answer 1

JavaScript中的条件应该如下所示，以检查“.thing”上的显示属性是否等于"none“(topper是一个不正确的引用)：

$(document).ready(function() {
    if ($('.top-thing').css('display') == 'none') { 
        $('.top-thing').slideDown("slow");
        $('.middle-thing').delay(500).slideDown("slow");
        $('.bottom-thing').delay(1000).slideDown("slow");
        topper.style.display = "initial"; //This line will have to change
    }           
});

在这种情况下，如果display属性不是"none“，它将不会执行if语句中的逻辑。

*此外，你将“初始”改为“初始”的提法也必须加以更新。您可能需要设置代码来使用会话变量来记住动画是否在各个页面中运行。完成这一任务是一个全新的问题，应该这样问。

以下是更新的JSFiddle。

Answer 2

问题在于分配给topper。若要解决此问题，请替换

topper.style.display === "none"

使用

$('.top-thing').css('display') === 'none'