JQuery не скрывая классов и анимации на клике

Моя цель - создать страницу, на которой каждый раз, когда я нажимаю на новую строку текста, анимация и затухание. Для этого сначала нужно скрыть элементы с "fadeDown1" до "fadeDown 4", а затем анимировать каждый элемент "fadeDownN" один раз для каждого n время, когда нажимается "стрелка вниз".

Проблема в том, что для этого мне нужно сначала спрятать элементы, прежде чем я смогу их затемнить. Первая проблема в том, что они не прячутся. Вторая проблема заключается в том, что анимация не срабатывает.

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>

Код сценария:

    $(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 ответа

Решение

Ваша проблема заключается в том, чтобы просить решение для анимации CSS...

<!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>
Источник

О боже

Я не использовал. Селектор для класса в моем JavaScript, чтобы выбрать классы. Проблема решена! Не забывайте свой синтаксис, все!

Источник
Другие вопросы по тегам