CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Tom Crews
Tom Crews

Reputation: 135

Jquery not executing animation when conditional is added

Been toying around with adding a cascading animation to my personal site. It works perfectly without the conditional, but I would like the script to check if the animation has already run such that when the user loads a new page, the animation does not need to play.

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

the code to be executed is:

$(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";
        } 
 });

I figure I must just be referring to the style element in some incorrect way, my CSS for .top-thing is as follows:

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

So I want to check if this attribute is "none" and execute the animation code if and only if it is, in fact, none. I guess a question that stems from this is: after the animation occurs, what does the JS change this style attribute to?

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

Upvotes: 1

Views: 86

Answers (2)

Kyle Stoflet
Kyle Stoflet

Reputation: 1234

Your conditional in your JavaScript should look like this in order to check if the display property on ".top-thing" is equal to "none" (topper is an incorrect reference):

$(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
    }           
});

In this case, if the display property is anything other than "none" it will not execute the logic in the if statement.

*Also, your reference to switch this to "initial" will have to be updated as well. You'll probably have to set up your code to use session variables to remember whether or not the animation has been run throughout various pages. Accomplishing this is a whole new question and should be asked as such.

Here is the updated JSFiddle.

Upvotes: 2

Kwarrtz
Kwarrtz

Reputation: 2753

The issue is with the assignment to topper. To fix the issue, replace

topper.style.display === "none"

with

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

Upvotes: 2

Related Questions