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

Jquery not executing animation when conditional is added

本文关键字：执行 动画 Jquery 条件 添加      更新时间：2023-09-26

一直在考虑在我的个人网站上添加层叠动画。如果没有条件，它可以完美地工作，但是我希望脚本检查动画是否已经运行，这样当用户加载一个新页面时，动画就不需要播放了。

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"，当且仅当它实际上为none时执行动画代码。我想一个问题，源于这是:动画发生后，JS改变这个风格属性是什么?

JSFiddle with HTML &div CSS: https://jsfiddle.net/evanbananas/ua418bzo/

JavaScript中的条件应该是这样的，以便检查display属性是否为"。top-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语句中的逻辑。

*同样，你将这个转换为"initial"的引用也必须更新。您可能需要设置代码以使用会话变量来记住动画是否在各个页面中运行。实现这一点是一个全新的问题，应该这样问。

这是更新后的JSFiddle

问题是分配给topper。要解决此问题，请替换

topper.style.display === "none"


$('.top-thing').css('display') === 'none'
相关文章：