Question

我的目标是创建一个页面，每次我点击一行新的文本动画并淡入。为此，我首先隐藏元素“fadeDown1”到“fadeDown 4”，然后为每个“fadeDownN”元素设置动画一次每次单击“downArrow”时每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++;
    }); 
});

Answer 1

你的问题是乞求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>

Answer 2

哦，Jeez -

我没有使用。我的JavaScript中的类选择器，用于选择类。问题解决了！每个人都不要忘记你的语法！

jquery在点击时不隐藏类和动画

2 个答案: