CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
camelCaseCowboy
camelCaseCowboy

Reputation: 986

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++;
    }); 
});

Upvotes: 1

Views: 38

Answers (2)

camelCaseCowboy
camelCaseCowboy

Reputation: 986

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!

Upvotes: 0

user4723924
user4723924

Reputation: 36

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>

Upvotes: 1

Related Questions