jquery not hiding classes and animating in on click

My goal is to create a page where every time I click a new line of text animates and fades in. To do that I first hide the elements "fadeDown1" through "fadeDown 4", then animate each "fadeDownN" element once per n each time when "downArrow" is clicked.

The problem is that in order to do that, I need to hide the elements in the first place before I can fade them in. The first problem is that they're not hiding. The second problem is that the animation doesn't seem to fire.

HTML:

<!DOCTYPE html>


<html>

<head>

<link rel="stylesheet" type="text/css" href="../css/main.css">


</head>

<body>

    <div id="container">

        <p class="fadeDown1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at interdum dui. Nullam blandit est libero. Maecenas a ex ante. Donec mollis eleifend nunc quis sagittis. 
        </p>

        <p class="fadeDown2">

            Nullam eu lacus sed neque feugiat vulputate. Sed finibus et nulla at mollis. Sed ultricies eu massa vitae suscipit. Fusce a semper est. Nunc sed egestas lectus.


            </p>
        <p class="fadeDown3">

            Nam scelerisque condimentum sapien, ut semper turpis pretium ac. Vivamus pulvinar finibus nulla, nec sollicitudin purus laoreet vel. In finibus, elit nec lacinia pulvinar, tortor est pretium justo, 

            </p>

        <p class="fadeDown4">
             Donec consequat massa vitae massa viverra, nec pellentesque lectus dictum. Curabitur vitae nisi in nunc vestibulum mattis. 

        </p>

        <p class="fadeDown5">
            Pellentesque egestas venenatis suscipit. Integer dui lacus, luctus sed sem nec, volutpat vulputate lacus. 
        </p>

        <div class="downArrow"> 
            <p>&darr;</p>
            </div>

    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../scripts/introclick.js"></script>

</body>


</html>

Script Code:

    $(document).ready(function(){

var i = 1; 
var j = 1;

//Hide the fadeDown elements on page load
    $(".downArrow").append("</p> Test </p>");


    function hideThemAll(){

        for (i=1; i < 6 ; i++){
        if (hiddenVars = 1){
            $("fadeDown"+i).hide();
        }
    }
}

hideThemAll();


//click arrow to simultaneously fade in and animate down one "fadeDown" class per click 
//(so no for loop)


    $(".downArrow").on("click",() => {

        $("fadeDown"+j).fadeIn({queue: false, duration:'slow'});
        $("fadeDown"+j).animate({top: "-10px"}, 'slow');
        j++;
    }); 
});

2 answers

  • answered 2018-01-13 17:54 user4723924

    Your problem is begging for a CSS animation solution...

    <!DOCTYPE html>
    <head>
    
    <style type="text/css">
    
    .fadeDown:hover {animation: AnimText 2s linear 0s infinite alternate none;}
    
    @keyframes AnimText {
       0% {opacity:1;}
      50% {opacity:0.5;}
     100% {opacity:0;}
    }
    
    </style>
    </head>
    
    <body>
    
    <p class="fadeDown">Some demo text...</p>
    
    <p class="fadeDown">Another line...</p>
    
    <p class="fadeDown">Yet another...</p>
    
    
    </body>
    </html>
    

  • answered 2018-01-13 19:43 user1623804

    Oh Jeez-

    I wasn't using the . selector for class in my JavaScript to select the classes. Issue solved! Don't forget your syntax, everyone!